返回 oh-my-ppt
preview.html
根目录 / resources / styles / gradient-cosmic / 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:"PingFang SC","Noto Sans SC","Helvetica Neue",sans-serif; }
9 .canvas {
10 width: 1600px; height: 900px; position: relative; color: #F5F5F5;
11 background: linear-gradient(115deg, #000000 0%, #0D1240 35%, #1A237E 55%, #2A1A4A 70%, #4A2A0A 88%, #FF6D00 100%);
12 overflow: hidden;
13 }
14
15 /* 星空层 */
16 .stars-bg { position: absolute; top:0; left:0; width: 55%; height: 100%; }
17
18 /* 烟火层 */
19 .fireworks { position: absolute; right: 0; bottom: 0; width: 50%; height: 80%; }
20
21 /* 分界光带 */
22 .glow-line {
23 position: absolute; top: 0; left: 50%; width: 4px; height: 100%;
24 background: linear-gradient(180deg, transparent, #FFD700 40%, #FF9800 60%, transparent);
25 filter: blur(3px); opacity: 0.7;
26 }
27
28 /* 月亮 */
29 .moon {
30 position: absolute; top: 110px; left: 280px;
31 width: 110px; height: 110px; border-radius: 50%;
32 background: radial-gradient(circle at 35% 35%, #FFF3D6 0%, #FFD700 70%, #FF9800 100%);
33 box-shadow: 0 0 60px rgba(255,215,0,0.5);
34 }
35
36 /* 标签 */
37 .tag {
38 position: absolute; top: 80px; left: 140px; z-index:5;
39 font-size: 15px; letter-spacing: 6px; font-weight: 600;
40 color: #FFD700;
41 }
42 .tag::before { content:""; display:inline-block; width:24px; height:2px; background:#FFD700; vertical-align:middle; margin-right:12px; }
43
44 /* 标题 */
45 .title { position: absolute; top: 260px; left: 140px; z-index:5; }
46 .main-title {
47 font-size: 128px; font-weight: 800; line-height: 1.05;
48 letter-spacing: 8px; color: #F5F5F5;
49 text-shadow: 0 0 30px rgba(255,215,0,0.3);
50 }
51 .main-title .gold {
52 background: linear-gradient(120deg, #FFD700 0%, #FF9800 100%);
53 -webkit-background-clip: text; background-clip: text; color: transparent;
54 }
55 .sub-title {
56 font-size: 28px; color: #FFF3D6; letter-spacing: 10px;
57 margin-top: 28px; font-weight: 300; opacity: 0.9;
58 }
59 .sub-title .em { color: #FFD700; font-weight: 600; }
60
61 /* 正文 */
62 .body {
63 position: absolute; left: 140px; bottom: 200px; z-index:5;
64 width: 500px; font-size: 22px; line-height: 2.1;
65 color: #F5F5F5; letter-spacing: 1.5px; font-weight: 300; opacity: 0.95;
66 }
67 .body strong { color: #FFD700; font-weight: 600; }
68
69 /* 右侧引文卡 */
70 .quote-card {
71 position: absolute; top: 200px; right: 140px; z-index:5;
72 width: 340px; padding: 36px;
73 background: rgba(0,0,0,0.4);
74 border: 1px solid rgba(255,215,0,0.4);
75 backdrop-filter: blur(4px);
76 }
77 .quote-card .qm { font-size: 60px; color: #FFD700; line-height: 0.5; font-family: serif;}
78 .quote-card p { font-size: 22px; line-height: 1.9; color: #FFF3D6; letter-spacing: 2px; margin-top: 12px;}
79 .quote-card .em { color: #FF9800; font-weight: 600; }
80 .quote-card .sig { font-size: 15px; color: #FFD700; letter-spacing: 3px; margin-top: 20px; opacity: 0.8;}
81
82 /* 右下数据 */
83 .stats {
84 position: absolute; right: 140px; bottom: 90px; z-index:5;
85 display: flex; gap: 30px;
86 }
87 .stat .n {
88 font-size: 48px; font-weight: 800; line-height: 1;
89 background: linear-gradient(120deg, #FFD700, #FF9800);
90 -webkit-background-clip: text; background-clip: text; color: transparent;
91 font-family:"Helvetica Neue",sans-serif;
92 }
93 .stat .l { font-size: 14px; color: #FFF3D6; letter-spacing: 3px; margin-top: 8px; opacity: 0.8;}
94
95 /* 底部 */
96 .footer {
97 position: absolute; left: 140px; bottom: 50px; z-index:5;
98 font-size: 14px; color: #FFD700; letter-spacing: 4px; opacity: 0.7;
99 }
100 </style>
101 </head>
102 <body>
103 <div class="canvas">
104 <!-- 星空 -->
105 <svg class="stars-bg" viewBox="0 0 880 900" preserveAspectRatio="none">
106 <g fill="#F5F5F5">
107 <circle cx="80" cy="120" r="1.5" opacity="0.9"/>
108 <circle cx="200" cy="80" r="1" opacity="0.7"/>
109 <circle cx="340" cy="180" r="2" opacity="0.95"/>
110 <circle cx="120" cy="300" r="1" opacity="0.6"/>
111 <circle cx="280" cy="400" r="1.5" opacity="0.8"/>
112 <circle cx="420" cy="260" r="1" opacity="0.7"/>
113 <circle cx="180" cy="520" r="2" opacity="0.9"/>
114 <circle cx="380" cy="600" r="1" opacity="0.6"/>
115 <circle cx="80" cy="700" r="1.5" opacity="0.8"/>
116 <circle cx="500" cy="150" r="1" opacity="0.6"/>
117 <circle cx="600" cy="320" r="1.5" opacity="0.7"/>
118 <circle cx="240" cy="620" r="1" opacity="0.5"/>
119 <circle cx="460" cy="740" r="1.5" opacity="0.7"/>
120 </g>
121 <g fill="#FFD700">
122 <circle cx="160" cy="200" r="2.5" opacity="0.9"/>
123 <circle cx="320" cy="480" r="2" opacity="0.8"/>
124 <circle cx="540" cy="240" r="2.5" opacity="0.85"/>
125 </g>
126 </svg>
127
128 <!-- 烟火 -->
129 <svg class="fireworks" viewBox="0 0 800 720" preserveAspectRatio="none">
130 <g stroke="#FFD700" stroke-width="2" fill="none" opacity="0.85">
131 <line x1="500" y1="200" x2="500" y2="120"/>
132 <line x1="500" y1="200" x2="560" y2="140"/>
133 <line x1="500" y1="200" x2="600" y2="200"/>
134 <line x1="500" y1="200" x2="560" y2="260"/>
135 <line x1="500" y1="200" x2="500" y2="280"/>
136 <line x1="500" y1="200" x2="440" y2="260"/>
137 <line x1="500" y1="200" x2="400" y2="200"/>
138 <line x1="500" y1="200" x2="440" y2="140"/>
139 </g>
140 <g fill="#FF9800">
141 <circle cx="500" cy="120" r="4"/>
142 <circle cx="560" cy="140" r="4"/>
143 <circle cx="600" cy="200" r="4"/>
144 <circle cx="560" cy="260" r="4"/>
145 <circle cx="500" cy="280" r="4"/>
146 <circle cx="440" cy="260" r="4"/>
147 <circle cx="400" cy="200" r="4"/>
148 <circle cx="440" cy="140" r="4"/>
149 <circle cx="500" cy="200" r="6" fill="#FFD700"/>
150 </g>
151 <g stroke="#FF6D00" stroke-width="1.5" fill="none" opacity="0.7">
152 <line x1="680" y1="400" x2="680" y2="340"/>
153 <line x1="680" y1="400" x2="720" y2="360"/>
154 <line x1="680" y1="400" x2="740" y2="400"/>
155 <line x1="680" y1="400" x2="720" y2="440"/>
156 <line x1="680" y1="400" x2="680" y2="460"/>
157 <line x1="680" y1="400" x2="640" y2="440"/>
158 <line x1="680" y1="400" x2="620" y2="400"/>
159 <line x1="680" y1="400" x2="640" y2="360"/>
160 </g>
161 <g fill="#FFD700" opacity="0.8">
162 <circle cx="680" cy="340" r="3"/><circle cx="720" cy="360" r="3"/>
163 <circle cx="740" cy="400" r="3"/><circle cx="720" cy="440" r="3"/>
164 <circle cx="680" cy="460" r="3"/><circle cx="640" cy="440" r="3"/>
165 <circle cx="620" cy="400" r="3"/><circle cx="640" cy="360" r="3"/>
166 <circle cx="680" cy="400" r="5" fill="#FF9800"/>
167 </g>
168 </svg>
169
170 <div class="glow-line"></div>
171 <div class="moon"></div>
172
173 <div class="tag">★ COSMIC GRADIENT · 星河烟火</div>
174
175 <div class="title">
176 <div class="main-title">一半<span class="gold">星河</span><br>一半<span class="gold">烟火</span></div>
177 <div class="sub-title">永恒与绚烂 <span class="em">·</span> 各占半边天空</div>
178 </div>
179
180 <div class="body">
181 星河是<strong>永恒</strong>的寂静，<br>
182 烟火是<strong>瞬间</strong>的绚烂。<br>
183 一半仰望宇宙，一半拥抱人间，<br>
184 这便是完整的夜。
185 </div>
186
187 <div class="quote-card">
188 <div class="qm">"</div>
189 <p>星河滚烫，<br>人间<span class="em">值得</span>。<br>一半理想，一半烟火。</p>
190 <div class="sig">— 致每一个追梦人</div>
191 </div>
192
193 <div class="stats">
194 <div class="stat"><div class="n">∞</div><div class="l">STARS</div></div>
195 <div class="stat"><div class="n">1</div><div class="l">NIGHT</div></div>
196 <div class="stat"><div class="n">2</div><div class="l">HALVES</div></div>
197 </div>
198
199 <div class="footer">GRADIENT COSMIC · VOL. 13 · HALF STAR, HALF FIRE</div>
200 </div>
201 </body>
202 </html>
203
203 lines HTML