古风文案版代码

屿风

Miller Design

Without a Grid竹窗夜话

Today · 星期二

竹窗对语。

古风页面灵感

以水墨国风为基调，素雅低饱和配色 营造静谧含蓄的古典氛围感。

银钱打赏

感谢看官打赏

屿风

1. <style>
   
2. .wrap {
   
3.     box-sizing: border-box;
   
4.     max-width: 1100px;
   
5.     margin: 0 auto;
   
6.     padding:30px;
   
7.     background:#f4efe6;
   
8.     /* 宣纸纹理叠加 */
   
9.     background-image: url("https://pic.616pic.com/ys_bnew_img/00/11/41/8c2YVx3w7q.jpg");
   
10.     background-blend-mode: soft-light;
    
11.     color:#2c2822;
    
12. }
    
13. .topbar{
    
14.     display:flex;justify-content:space-between;align-items:center;
    
15.     padding-bottom:12px;border-bottom:2px solid #3a3630;margin-bottom:40px;
    
16. }
    
17. .topbar .left{font-size:24px;font-weight:700;}
    
18. .topbar .right{font-size:16px;color:#544f48;display:flex;gap:40px;}
    
19. .meta{font-size:18px;color:#666058;margin-bottom:12px;}
    
20. .banner{
    
21.     width:100%;
    
22.     position:relative;
    
23.     overflow:hidden;border-radius:2px;margin-bottom:24px;
    
24.     aspect-ratio: 1689 / 960; /* 原图比例，高度自适应 */
    
25. }
    
26. .banner .bg{
    
27.     position:absolute;left:0;top:0;width:100%;height:100%;
    
28.     background:url('https://p3-flow-image-sign.byteimg.com/tos-cn-i-a9rns2rl98/31101100893c443892d410d400441311~tplv-a9rns2rl98-image.image') center/cover no-repeat;
    
29.     /* 已移除模糊与放大效果 */
    
30. }
    
31. .banner .avatar{
    
32.     width:120px;height:120px;border-radius:50%;position:absolute;right:32px;top:32px;z-index:2;
    
33.     background:url('https://你的头像地址.jpg') center/cover no-repeat;
    
34.     border:4px solid #f4efe6;
    
35.     box-shadow: 0 2px 8px rgba(44,40,34,0.25);
    
36. }
    
37. /* 主标题 放大，!important兜底强制生效 */
    
38. h1 {
    
39.     font-size:72px !important;
    
40.     font-weight:800 !important;
    
41.     line-height:1.08 !important;
    
42.     margin:0 0 36px !important;
    
43.     letter-spacing:2px !important;
    
44.     background: linear-gradient(135deg, #2c2822 0%, #544f48 100%);
    
45.     -webkit-background-clip: text;
    
46.     background-clip: text;
    
47.     color: transparent;
    
48. }
    
49. /* 单栏文案，支持手动回车换行 + 自动容器换行 */
    
50. .single-text{
    
51.     margin-bottom:30px;
    
52.     word-wrap: break-word;
    
53.     overflow-wrap: break-word;
    
54. }
    
55. .single-text h3{
    
56.     font-size:26px;
    
57.     font-weight:700;
    
58.     /* 小标题淡墨渐变 */
    
59.     background: linear-gradient(135deg, #2c2822 0%, #423e38 100%);
    
60.     -webkit-background-clip: text;
    
61.     background-clip: text;
    
62.     color: transparent;
    
63.     margin:0 0 12px;
    
64.     word-wrap: break-word;
    
65. }
    
66. .single-text p{
    
67.     font-size:16px;
    
68.     color:#544f48;
    
69.     line-height:1.6;
    
70.     margin:0;
    
71.     word-wrap: break-word;
    
72.     overflow-wrap: break-word;
    
73.     white-space: pre-line;
    
74. }
    
75. .btns{display:flex;align-items:center;gap:24px;}
    
76. .btn-go{
    
77.     display:inline-block;padding:18px 40px;background:#3a4a49;color:#fff!important;
    
78.     font-size:20px;font-weight:600;text-decoration:none!important;border-radius:2px;
    
79.     box-shadow: 0 2px 6px rgba(58,74,73,0.2);
    
80.     cursor:pointer;
    
81. }
    
82. .btn-skip{font-size:20px;font-weight:600;color:#44403b;cursor:default;}
    
83. /* 银钱飘落容器 */
    
84. #coinContainer{
    
85.     position:fixed;
    
86.     left:0;top:0;
    
87.     width:100%;height:100%;
    
88.     pointer-events:none;
    
89.     z-index:999;
    
90. }
    
91. .coin{
    
92.     position:absolute;
    
93.     width:32px;height:32px;
    
94.     background:#c5b89c;
    
95.     border-radius:50%;
    
96.     border:2px solid #8c7b5e;
    
97.     /* 古铜钱中间方孔 */
    
98.     box-sizing:border-box;
    
99.     clip-path: polygon(0 0,100% 0,100% 100%,0 100%, 38% 38%,62% 38%,62% 62%,38% 62%);
    
100.     animation: fall 2.2s linear forwards;
     
101. }
     
102. @keyframes fall {
     
103.     0%{
     
104.         opacity:1;
     
105.         transform: translateY(0) rotate(0deg);
     
106.     }
     
107.     100%{
     
108.         opacity:0;
     
109.         transform: translateY(600px) rotate(720deg);
     
110.     }
     
111. }
     
112. @media(max-width:768px){
     
113.     .wrap{
     
114.         padding:20px;
     
115.     }
     
116.     h1{
     
117.         font-size:44px !important;
     
118.         letter-spacing:1px !important;
     
119.     }
     
120.     .single-text h3{
     
121.         font-size:22px;
     
122.     }
     
123.     .single-text p{
     
124.         font-size:15px;
     
125.     }
     
126.     .banner{
     
127.         /* 移动端保持原图比例自适应 */
     
128.     }
     
129.     .banner .avatar{width:80px;height:80px;right:16px;top:16px;}
     
130. }
     
131. </style>
     
132. <div class="wrap">
     
133.     <div class="topbar">
     
134.         <div class="left">Miller Design</div>
     
135.         <div class="right"><span>Without a Grid</span><span>竹窗夜话</span></div>
     
136.     </div>
     
137.     <div class="meta">Today · 星期二</div>
     
138.     <h1>竹窗对语。</h1>
     
139.     <div class="banner">
     
140.         <div class="bg"></div>
     
141.         <div class="avatar"></div>
     
142.     </div>
     
143.     <div class="single-text">
     
144.         <h3>古风页面灵感</h3>
     
145.         <p>以水墨国风为基调，素雅低饱和配色
     
146. 营造静谧含蓄的古典氛围感。</p>
     
147.     </div>
     
148.     <div class="btns">
     
149.         <div class="btn-go" onclick="createCoins()">银钱打赏</div>
     
150.         <span class="btn-skip">感谢看官打赏</span>
     
151.     </div>
     
152. </div>
     
153. <!-- 铜钱动画容器 -->
     
154. <div id="coinContainer"></div>
     
155. <script>
     
156. const coinContainer = document.getElementById('coinContainer');
     
157. function createCoins(){
     
158.     // 生成16枚古铜钱
     
159.     for(let i=0;i<16;i++){
     
160.         const coin = document.createElement('div');
     
161.         coin.className = 'coin';
     
162.         // 随机水平位置
     
163.         const leftPos = Math.random() * window.innerWidth;
     
164.         coin.style.left = leftPos + 'px';
     
165.         coin.style.top = '0px';
     
166.         // 随机延迟，错落下落
     
167.         coin.style.animationDelay = Math.random() * 0.4 + 's';
     
168.         coinContainer.appendChild(coin);
     
169.         // 动画结束后删除dom，防止堆积
     
170.         setTimeout(()=>{coin.remove()},2600);
     
171.     }
     
172. }
     
173. </script>
     

复制代码