屿风 发表于 2026-10-13 17:02:36

古风文案版代码

<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/13/165423tolr7q19w1zow1zw.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/13/165423tolr7q19w1zow1zw.png') center/cover no-repeat;
    border:4px solid #f4efe6;
    box-shadow: 0 2px 8px rgba(44,40,34,0.25);
}
/* 主标题 放大，!important兜底强制生效 */
h1 {
    font-size:50px !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>以水墨国风为基调，素雅低饱和配色
营造静谧含蓄的古典氛围感。</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>

屿风 发表于 2026-10-13 17:14:42

<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://p3-flow-image-sign.byteimg.com/tos-cn-i-a9rns2rl98/31101100893c443892d410d400441311~tplv-a9rns2rl98-image.image') 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://你的头像地址.jpg') 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>以水墨国风为基调，素雅低饱和配色
营造静谧含蓄的古典氛围感。</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]
查看完整版本: 古风文案版代码