返回 oh-my-ppt
preview.html
根目录 / resources / styles / chinese-pastel-spring / preview.html
1 <!DOCTYPE html>
2 <html lang="zh-CN">
3 <head>
4 <meta charset="UTF-8">
5 <title>春日嫩柳 · 国风配色</title>
6 <style>
7 * { margin: 0; padding: 0; box-sizing: border-box; }
8 html, body { width: 1600px; height: 900px; overflow: hidden; font-family: "Songti SC","STSong","SimSun",serif; }
9 .canvas {
10 width: 1600px; height: 900px; position: relative; color: #3A3A3A;
11 background:
12 radial-gradient(ellipse at 15% 20%, rgba(168,191,143,0.25) 0%, transparent 50%),
13 radial-gradient(ellipse at 85% 80%, rgba(243,166,148,0.22) 0%, transparent 50%),
14 linear-gradient(135deg, #FBF8F0 0%, #F7F3E8 100%);
15 }
16
17 /* 顶部色带 */
18 .band {
19 position: absolute; top: 0; left: 0; width: 100%; height: 12px;
20 background: linear-gradient(90deg, #A8BF8F 0%, #C5D99E 35%, #F8C9B8 65%, #F3A694 100%);
21 }
22
23 /* 桃花枝 */
24 .branch { position: absolute; top: 0; right: 0; width: 420px; height: 380px; }
25
26 /* 左上小标 */
27 .tag {
28 position: absolute; top: 70px; left: 140px;
29 font-size: 16px; color: #5A4030; letter-spacing: 6px;
30 font-family: "Helvetica Neue",sans-serif;
31 }
32 .tag::before {
33 content: ""; display: inline-block; width: 30px; height: 2px;
34 background: #C0392B; vertical-align: middle; margin-right: 14px;
35 }
36
37 /* 标题 */
38 .title { position: absolute; top: 160px; left: 140px; }
39 .main-title {
40 font-size: 96px; font-weight: 800; color: #3A3A3A;
41 letter-spacing: 12px; line-height: 1.15;
42 }
43 .main-title .pink { color: #F3A694; }
44 .main-title .green { color: #A8BF8F; }
45 .sub-title {
46 font-size: 30px; color: #5A4030; letter-spacing: 14px;
47 margin-top: 24px; font-family: "STKaiti","KaiTi",serif;
48 }
49
50 /* 色卡宫格 */
51 .palette {
52 position: absolute; top: 460px; left: 140px;
53 display: flex; gap: 24px;
54 }
55 .swatch {
56 width: 150px; height: 200px; padding: 18px;
57 display: flex; flex-direction: column; justify-content: flex-end;
58 color: #FBF8F0; font-size: 16px; letter-spacing: 2px;
59 }
60 .s1 { background: #A8BF8F; }
61 .s2 { background: #C5D99E; color: #3A3A3A; }
62 .s3 { background: #F8C9B8; color: #3A3A3A; }
63 .s4 { background: #F3A694; }
64 .swatch .name { font-size: 22px; font-weight: bold; margin-bottom: 6px; }
65 .swatch .hex { font-size: 14px; opacity: 0.85; font-family: "Helvetica Neue",sans-serif; }
66
67 /* 右侧正文卡 */
68 .card {
69 position: absolute; top: 200px; right: 140px;
70 width: 420px; padding: 44px 40px;
71 background: rgba(251,248,240,0.75);
72 border-left: 5px solid #C0392B;
73 }
74 .card h3 {
75 font-size: 30px; color: #3A3A3A; letter-spacing: 6px;
76 margin-bottom: 24px;
77 }
78 .card p {
79 font-size: 20px; line-height: 2; color: #5A4030; letter-spacing: 1.5px;
80 }
81 .card p strong { color: #C0392B; }
82
83 /* 底部 */
84 .footer {
85 position: absolute; left: 140px; right: 140px; bottom: 70px;
86 display: flex; justify-content: space-between; align-items: center;
87 padding-top: 24px; border-top: 1px solid rgba(58,58,58,0.15);
88 }
89 .footer .l { font-size: 18px; color: #5A4030; letter-spacing: 4px; }
90 .footer .r { font-size: 16px; color: #5A4030; letter-spacing: 3px; font-family: "Helvetica Neue",sans-serif; }
91 .dot { display:inline-block;width:8px;height:8px;border-radius:50%;vertical-align:middle;margin:0 8px;}
92 .dot.g { background:#A8BF8F; } .dot.p { background:#F3A694; }
93 </style>
94 </head>
95 <body>
96 <div class="canvas">
97 <div class="band"></div>
98
99 <!-- 桃花枝 SVG -->
100 <svg class="branch" viewBox="0 0 420 380">
101 <path d="M420,40 Q300,80 220,160 Q140,240 60,360" stroke="#5A4030" stroke-width="4" fill="none"/>
102 <path d="M350,100 Q330,150 360,220" stroke="#5A4030" stroke-width="2.5" fill="none"/>
103 <circle cx="300" cy="110" r="22" fill="#F3A694" opacity="0.85"/>
104 <circle cx="290" cy="100" r="14" fill="#F8C9B8"/>
105 <circle cx="312" cy="125" r="12" fill="#F8C9B8"/>
106 <circle cx="240" cy="170" r="20" fill="#F3A694" opacity="0.85"/>
107 <circle cx="232" cy="162" r="12" fill="#F8C9B8"/>
108 <circle cx="370" cy="200" r="18" fill="#F3A694" opacity="0.8"/>
109 <circle cx="362" cy="194" r="11" fill="#F8C9B8"/>
110 <circle cx="160" cy="250" r="20" fill="#F3A694" opacity="0.85"/>
111 <circle cx="152" cy="242" r="12" fill="#F8C9B8"/>
112 <circle cx="172" cy="266" r="11" fill="#F8C9B8"/>
113 <!-- 嫩叶 -->
114 <ellipse cx="330" cy="140" rx="10" ry="4" fill="#A8BF8F" transform="rotate(40 330 140)"/>
115 <ellipse cx="270" cy="190" rx="11" ry="4" fill="#C5D99E" transform="rotate(-20 270 190)"/>
116 <ellipse cx="200" cy="220" rx="10" ry="4" fill="#A8BF8F" transform="rotate(30 200 220)"/>
117 <ellipse cx="120" cy="300" rx="11" ry="4" fill="#C5D99E" transform="rotate(-35 120 300)"/>
118 </svg>
119
120 <!-- 标签 -->
121 <div class="tag">CHINESE TRADITIONAL COLOR</div>
122
123 <!-- 标题 -->
124 <div class="title">
125 <div class="main-title">春日<span class="green">嫩</span>柳<span class="pink">桃</span>花</div>
126 <div class="sub-title">三月江南 · 一抹春色入画来</div>
127 </div>
128
129 <!-- 色卡 -->
130 <div class="palette">
131 <div class="swatch s1"><div class="name">嫩柳绿</div><div class="hex">#A8BF8F</div></div>
132 <div class="swatch s2"><div class="name">柳芽黄</div><div class="hex">#C5D99E</div></div>
133 <div class="swatch s3"><div class="name">淡樱粉</div><div class="hex">#F8C9B8</div></div>
134 <div class="swatch s4"><div class="name">桃花粉</div><div class="hex">#F3A694</div></div>
135 </div>
136
137 <!-- 右侧卡 -->
138 <div class="card">
139 <h3>配色理念</h3>
140 <p>取<strong>嫩柳</strong>之青翠，配<strong>桃花</strong>之娇粉，<br>
141 如初春晨光洒落枝头。<br>
142 温柔不腻，明媚不艳，<br>
143 是东方美学的清雅底色。</p>
144 </div>
145
146 <!-- 底部 -->
147 <div class="footer">
148 <div class="l">国风配色 <span class="dot g"></span> 春日系列 <span class="dot p"></span> VOL. 03</div>
149 <div class="r">SPRING · MMXXVI</div>
150 </div>
151 </div>
152 </body>
153 </html>
154
154 lines HTML