返回 oh-my-ppt
preview.html
根目录 / resources / styles / chinese-cream-blossom / 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: #3D3D3D;
11 background:
12 radial-gradient(ellipse at 80% 20%, rgba(245,191,200,0.3) 0%, transparent 55%),
13 radial-gradient(ellipse at 20% 85%, rgba(232,220,200,0.35) 0%, transparent 55%),
14 linear-gradient(135deg, #FAF7F0 0%, #F5F2E9 100%);
15 }
16
17 /* 樱花装饰 */
18 .blossom { position: absolute; top: 0; right: 0; width: 460px; height: 420px; opacity: 0.9; }
19 .petal-fall { position: absolute; }
20 .pf1 { top: 480px; left: 920px; }
21 .pf2 { top: 680px; left: 1180px; }
22
23 /* 印章 */
24 .seal {
25 position: absolute; top: 80px; left: 140px;
26 width: 70px; height: 70px; background: #B23A48;
27 display:flex; align-items:center; justify-content:center;
28 color:#FAF7F0; font-size:18px; font-weight:bold;
29 text-align:center; line-height:1.1; letter-spacing:1px;
30 font-family:"STKaiti",serif;
31 }
32
33 /* 标签 */
34 .tag {
35 position: absolute; top: 95px; left: 240px;
36 font-size: 16px; color: #7A6B5D; letter-spacing: 6px;
37 font-family:"Helvetica Neue",sans-serif;
38 }
39
40 /* 标题 */
41 .title { position: absolute; top: 250px; left: 140px; }
42 .main-title {
43 font-size: 120px; font-weight: 800; color: #3D3D3D;
44 letter-spacing: 16px; line-height: 1.1;
45 }
46 .main-title .pink { color: #F091A0; }
47 .sub-title {
48 font-size: 30px; color: #7A6B5D; letter-spacing: 12px;
49 margin-top: 30px; font-family:"STKaiti",serif;
50 }
51 .sub-title .em { color: #B23A48; }
52
53 /* 正文 */
54 .body {
55 position: absolute; left: 140px; bottom: 160px;
56 width: 520px; font-size: 22px; line-height: 2.1;
57 color: #3D3D3D; letter-spacing: 2px;
58 }
59 .body strong { color: #F091A0; font-weight: 600; }
60
61 /* 右侧色卡 */
62 .palette {
63 position: absolute; top: 250px; right: 140px;
64 width: 320px;
65 }
66 .pcard {
67 display:flex; align-items:center; padding: 20px 24px;
68 background: rgba(250,247,240,0.7);
69 margin-bottom: 16px; border-left: 4px solid #F091A0;
70 }
71 .pcard .chip { width: 50px; height: 50px; margin-right: 22px; flex-shrink:0; }
72 .pcard .info .name { font-size: 22px; color: #3D3D3D; letter-spacing: 3px; }
73 .pcard .info .hex { font-size: 14px; color: #7A6B5D; font-family:"Helvetica Neue",sans-serif; }
74
75 /* 底部 */
76 .footer {
77 position: absolute; left: 140px; right: 140px; bottom: 70px;
78 display:flex; justify-content:space-between; align-items:center;
79 padding-top: 24px; border-top: 1px solid rgba(122,107,93,0.2);
80 }
81 .footer .l { font-size: 18px; color: #7A6B5D; letter-spacing: 4px; }
82 .footer .r { font-size: 16px; color: #7A6B5D; letter-spacing: 3px; font-family:"Helvetica Neue",sans-serif; }
83 </style>
84 </head>
85 <body>
86 <div class="canvas">
87 <!-- 樱花 -->
88 <svg class="blossom" viewBox="0 0 460 420">
89 <g transform="translate(320,120)">
90 <ellipse cx="0" cy="-40" rx="34" ry="50" fill="#F5BFC8" opacity="0.85"/>
91 <ellipse cx="38" cy="-12" rx="34" ry="50" fill="#F091A0" opacity="0.8" transform="rotate(72)"/>
92 <ellipse cx="24" cy="34" rx="34" ry="50" fill="#F5BFC8" opacity="0.85" transform="rotate(144)"/>
93 <ellipse cx="-24" cy="34" rx="34" ry="50" fill="#F091A0" opacity="0.8" transform="rotate(216)"/>
94 <ellipse cx="-38" cy="-12" rx="34" ry="50" fill="#F5BFC8" opacity="0.85" transform="rotate(288)"/>
95 <circle cx="0" cy="0" r="10" fill="#D4A574"/>
96 </g>
97 <g transform="translate(180,220)">
98 <ellipse cx="0" cy="-26" rx="22" ry="32" fill="#F5BFC8" opacity="0.7"/>
99 <ellipse cx="25" cy="-8" rx="22" ry="32" fill="#F091A0" opacity="0.65" transform="rotate(72)"/>
100 <ellipse cx="16" cy="22" rx="22" ry="32" fill="#F5BFC8" opacity="0.7" transform="rotate(144)"/>
101 <ellipse cx="-16" cy="22" rx="22" ry="32" fill="#F091A0" opacity="0.65" transform="rotate(216)"/>
102 <ellipse cx="-25" cy="-8" rx="22" ry="32" fill="#F5BFC8" opacity="0.7" transform="rotate(288)"/>
103 <circle cx="0" cy="0" r="6" fill="#D4A574"/>
104 </g>
105 <path d="M460,0 Q360,80 280,180 Q200,280 120,420" stroke="#7A6B5D" stroke-width="2.5" fill="none" opacity="0.4"/>
106 </svg>
107
108 <svg class="petal-fall pf1" width="40" height="50" viewBox="0 0 40 50">
109 <ellipse cx="20" cy="25" rx="14" ry="22" fill="#F5BFC8" opacity="0.8" transform="rotate(20 20 25)"/>
110 </svg>
111 <svg class="petal-fall pf2" width="36" height="46" viewBox="0 0 36 46">
112 <ellipse cx="18" cy="23" rx="12" ry="20" fill="#F091A0" opacity="0.75" transform="rotate(-30 18 23)"/>
113 </svg>
114
115 <div class="seal">温柔<br>雅致</div>
116 <div class="tag">CREAM · BLOSSOM · 温柔系</div>
117
118 <div class="title">
119 <div class="main-title">米白<span class="pink">樱</span>粉</div>
120 <div class="sub-title">一抹淡粉 <span class="em">·</span> 半卷温柔</div>
121 </div>
122
123 <div class="body">
124 于<strong>米白</strong>宣纸上，晕开一抹<strong>樱粉</strong>。<br>
125 不喧哗，不浓烈，<br>
126 如三月微风拂过花瓣，<br>
127 安静而有温度。
128 </div>
129
130 <div class="palette">
131 <div class="pcard"><div class="chip" style="background:#F091A0"></div><div class="info"><div class="name">樱粉</div><div class="hex">#F091A0</div></div></div>
132 <div class="pcard"><div class="chip" style="background:#F5BFC8"></div><div class="info"><div class="name">淡樱</div><div class="hex">#F5BFC8</div></div></div>
133 <div class="pcard"><div class="chip" style="background:#F5F2E9"></div><div class="info"><div class="name">宣纸米</div><div class="hex">#F5F2E9</div></div></div>
134 <div class="pcard" style="border-left-color:#B23A48"><div class="chip" style="background:#B23A48"></div><div class="info"><div class="name">胭脂红</div><div class="hex">#B23A48</div></div></div>
135 </div>
136
137 <div class="footer">
138 <div class="l">温柔国风配色 · VOL. 05</div>
139 <div class="r">CREAM BLOSSOM · MMXXVI</div>
140 </div>
141 </div>
142 </body>
143 </html>
144
144 lines HTML