营口坠龙事件
本帖最后由 温墨客 于 2026-10-21 15:04 编辑 <br /><br /><style>.wrap {
box-sizing: border-box;
max-width: 1100px;
margin: 0 auto;
padding:30px;
background:#f4efe6;
/* 宣纸纹理叠加 */
background-image: url("https://pic.616pic.com/ys_bnew_img/00/11/41/8c2YVx3w7q.jpg");
background-blend-mode: soft-light;
color:#2c2822;
}
.topbar{
display:flex;justify-content:space-between;align-items:center;
padding-bottom:12px;border-bottom:2px solid #3a3630;margin-bottom:40px;
}
.topbar .left{font-size:24px;font-weight:700;}
.topbar .right{font-size:16px;color:#544f48;display:flex;gap:40px;}
.meta{font-size:18px;color:#666058;margin-bottom:12px;}
.banner{
width:100%;
position:relative;
overflow:hidden;border-radius:2px;margin-bottom:24px;
aspect-ratio: 1689 / 960; /* 原图比例，高度自适应 */
}
.banner .bg{
position:absolute;left:0;top:0;width:100%;height:100%;
background:url('https://www.qqmcc.net/data/attachment/album/202610/21/150238o0egxmwwrzgpdwdm.png') center/cover no-repeat;
/* 已移除模糊与放大效果 */
}
.banner .avatar{
width:120px;height:120px;border-radius:50%;position:absolute;right:32px;top:32px;z-index:2;
background:url('https://www.qqmcc.net/data/attachment/album/202610/21/150238o0egxmwwrzgpdwdm.png') center/cover no-repeat;
border:4px solid #f4efe6;
box-shadow: 0 2px 8px rgba(44,40,34,0.25);
}
/* 主标题 放大，!important兜底强制生效 */
h1 {
font-size:72px !important;
font-weight:800 !important;
line-height:1.08 !important;
margin:0 0 36px !important;
letter-spacing:2px !important;
background: linear-gradient(135deg, #2c2822 0%, #544f48 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* 单栏文案，支持手动回车换行 + 自动容器换行 */
.single-text{
margin-bottom:30px;
word-wrap: break-word;
overflow-wrap: break-word;
}
.single-text h3{
font-size:26px;
font-weight:700;
/* 小标题淡墨渐变 */
background: linear-gradient(135deg, #2c2822 0%, #423e38 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
margin:0 0 12px;
word-wrap: break-word;
}
.single-text p{
font-size:16px;
color:#544f48;
line-height:1.6;
margin:0;
word-wrap: break-word;
overflow-wrap: break-word;
white-space: pre-line;
}
.btns{display:flex;align-items:center;gap:24px;}
.btn-go{
display:inline-block;padding:18px 40px;background:#3a4a49;color:#fff!important;
font-size:20px;font-weight:600;text-decoration:none!important;border-radius:2px;
box-shadow: 0 2px 6px rgba(58,74,73,0.2);
cursor:pointer;
}
.btn-skip{font-size:20px;font-weight:600;color:#44403b;cursor:default;}
/* 银钱飘落容器 */
#coinContainer{
position:fixed;
left:0;top:0;
width:100%;height:100%;
pointer-events:none;
z-index:999;
}
.coin{
position:absolute;
width:32px;height:32px;
background:#c5b89c;
border-radius:50%;
border:2px solid #8c7b5e;
/* 古铜钱中间方孔 */
box-sizing:border-box;
clip-path: polygon(0 0,100% 0,100% 100%,0 100%, 38% 38%,62% 38%,62% 62%,38% 62%);
animation: fall 2.2s linear forwards;
}
@keyframes fall {
0%{
opacity:1;
transform: translateY(0) rotate(0deg);
}
100%{
opacity:0;
transform: translateY(600px) rotate(720deg);
}
}
@media(max-width:768px){
.wrap{
padding:20px;
}
h1{
font-size:44px !important;
letter-spacing:1px !important;
}
.single-text h3{
font-size:22px;
}
.single-text p{
font-size:15px;
}
.banner{
/* 移动端保持原图比例自适应 */
}
.banner .avatar{width:80px;height:80px;right:16px;top:16px;}
}
</style>
<div class="wrap">
<div class="topbar">
<div class="left">Miller Design</div>
<div class="right"><span>Without a Grid</span><span>民间故事</span></div>
</div>
<div class="meta">Today · 星期三</div>
<h1>营口坠龙事件</h1>
<div class="banner">
<div class="bg"></div>
<div class="avatar"></div>
</div>
<div class="single-text">
<h3>营口坠龙事件</h3>
<p>934 年夏天，营口辽河下游苇塘，传出了坠龙的消息。
据当时报纸记载，这只庞然大物困在泥沼，身上有鳞、头上生角，气息奄奄。附近百姓自发赶来，担水浇在它身上，盼望它能重回水中。
暴雨过后它一度消失，不久又在下游发现它的骸骨，骨架巨大，有类似龙角的骨骼，引来无数人前去观看。
这起事件被报纸记录、留下了那张经典老照片。多年之后，主流推测是搁浅须鲸，骨骼摆放方式造成酷似龙的外形；但当年目击者的口述、一些细节矛盾，直到今天依旧让很多人存疑。
没有确凿证据证明是传说里的龙，可这段尘封的旧事，依旧是国内最出名的神秘传闻之一。
你觉得，当年营口苇塘里的到底是什么？。</p>
</div>
<div class="btns">
<div class="btn-go" onclick="createCoins()">银钱打赏</div>
<span class="btn-skip">感谢看官打赏</span>
</div>
</div>
<!-- 铜钱动画容器 -->
<div id="coinContainer"></div>
<script>
const coinContainer = document.getElementById('coinContainer');
function createCoins(){
// 生成16枚古铜钱
for(let i=0;i<16;i++){
const coin = document.createElement('div');
coin.className = 'coin';
// 随机水平位置
const leftPos = Math.random() * window.innerWidth;
coin.style.left = leftPos + 'px';
coin.style.top = '0px';
// 随机延迟，错落下落
coin.style.animationDelay = Math.random() * 0.4 + 's';
coinContainer.appendChild(coin);
// 动画结束后删除dom，防止堆积
setTimeout(()=>{coin.remove()},2600);
}
}
</script>
页:
[1]