返回 Pixelle-Video
image_fashion_vintage.html
根目录 / templates / 1080x1920 / image_fashion_vintage.html
1 <!DOCTYPE html>
2 <html lang="zh-CN">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="template:media-width" content="1024">
6 <meta name="template:media-height" content="1024">
7 <meta name="viewport" content="width=1080, height=1920">
8 <title>时尚复古风格 - 1080x1920</title>
9 <style>
10 * { margin: 0; padding: 0; box-sizing: border-box; }
11
12 html, body { width: 1080px; height: 1920px; overflow: hidden; }
13
14 body {
15 font-family: 'PingFang SC', 'Source Han Sans', 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, sans-serif;
16 display: flex;
17 flex-direction: column;
18 background: #e8d5cc; /* 淡棕粉色背景 */
19 }
20
21 /* 顶部标题区（约25%）*/
22 .top {
23 height: 20%;
24 background: #e8d5cc; /* 淡棕粉色 */
25 position: relative;
26 display: flex;
27 align-items: flex-end;
28 justify-content: center;
29 padding: 80px 60px;
30 }
31
32 /* 装饰元素 */
33 .decoration {
34 position: absolute;
35 opacity: 0.3;
36 }
37
38 .decoration.leaf-left {
39 left: 40px;
40 top: 50%;
41 transform: translateY(-50%);
42 width: 120px;
43 height: 120px;
44 background: radial-gradient(circle, transparent 40%, #f5e8e0 40%, #f5e8e0 45%, transparent 45%);
45 border-radius: 50% 50% 50% 0;
46 clip-path: polygon(50% 0%, 80% 20%, 100% 50%, 80% 80%, 50% 100%, 20% 80%, 0% 50%, 20% 20%);
47 }
48
49 .decoration.wave-right {
50 right: 40px;
51 top: 40%;
52 width: 100px;
53 height: 80px;
54 background: linear-gradient(135deg, transparent, #f5e8e0 50%, transparent);
55 border-radius: 50px;
56 transform: rotate(-15deg);
57 }
58
59 .title-section {
60 text-align: center;
61 z-index: 2;
62 }
63
64 .main-title {
65 font-size: 88px;
66 font-weight: 900;
67 color: #ffffff;
68 line-height: 1.2;
69 text-shadow: 0 2px 12px rgba(0,0,0,0.15);
70 letter-spacing: 2px;
71 }
72
73 /* 中间图片区（约50%）*/
74 .middle {
75 height: 50%;
76 background: #f8f6f4; /* 浅灰白色 */
77 position: relative;
78 display: flex;
79 align-items: flex-start;
80 justify-content: center;
81 overflow: hidden;
82 }
83
84 .image-container {
85 width: 100%;
86 height: 100%;
87 position: relative;
88 }
89
90 .image-container img {
91 width: 100%;
92 height: 100%;
93 object-fit: cover;
94 display: block;
95 }
96
97 /* 底部文字区（约25%）*/
98 .bottom {
99 height: 25%;
100 background: #e8d5cc; /* 与顶部相同颜色 */
101 position: relative;
102 display: flex;
103 align-items: flex-start;
104 justify-content: center;
105 padding: 0px;
106 }
107
108 .bottom-decoration {
109 position: absolute;
110 opacity: 0.3;
111 }
112
113 .bottom-decoration.leaf-right {
114 right: 40px;
115 top: 50%;
116 transform: translateY(-50%);
117 width: 100px;
118 height: 100px;
119 background: radial-gradient(circle, transparent 40%, #f5e8e0 40%, #f5e8e0 45%, transparent 45%);
120 border-radius: 50% 50% 50% 0;
121 clip-path: polygon(50% 0%, 80% 20%, 100% 50%, 80% 80%, 50% 100%, 20% 80%, 0% 50%, 20% 20%);
122 }
123
124 .bottom-text {
125 text-align: center;
126 z-index: 2;
127 font-size: 52px;
128 font-weight: 400;
129 color: #ffffff;
130 font-family: 'Brush Script MT', 'KaiTi', cursive; /* 手写体风格 */
131 font-style: italic;
132 text-shadow: 0 2px 10px rgba(0,0,0,0.15);
133 letter-spacing: 2px;
134 }
135
136 @media (max-width: 1080px) {
137 .main-title { font-size: 76px; }
138 .subtitle { font-size: 36px; }
139 .bottom-text { font-size: 44px; }
140 }
141 </style>
142 </head>
143 <body>
144 <!-- 顶部标题区 -->
145 <div class="top">
146 <div class="decoration leaf-left"></div>
147 <div class="decoration wave-right"></div>
148 <div class="title-section">
149 <div class="main-title">{{title}}</div>
150 </div>
151 </div>
152
153 <!-- 中间图片区 -->
154 <div class="middle">
155 <div class="image-container">
156 <img src="{{image}}" alt="内容图片">
157 </div>
158 </div>
159
160 <!-- 底部文字区 -->
161 <div class="bottom">
162 <div class="bottom-decoration leaf-right"></div>
163 <div class="bottom-text">{{text}}</div>
164 </div>
165 </body>
166 </html>
167
168
168 lines HTML