Setting the file. One moment. 34.14
Spotlight
(opens in a new tab)
references/styles/spotlight.html
HTML·142 lines·5 KB
frames: clean (skip hairline/polaroid — clashes with glow)
16 content: 情绪故事 / 旁白 / 角色弧线 / 黑暗时刻
17-->
18<!doctype html>
19<html lang="zh-CN">
20 <head>
21 <meta charset="utf-8" />
22 <title>style · spotlight</title>
23 <style>
24 html,
25 body {
26 margin: 0;
27 padding: 0;
28 background: #0a0c12;
29 font-family: ui-sans-serif, system-ui, sans-serif;
30 }
31 .stage {
32 position: relative;
33 width: 1920px;
34 height: 1080px;
35 transform-origin: top left;
36 transform: scale(0.5);
37 overflow: hidden;
38 }
39 .card-host {
40 position: absolute;
41 left: 0;
42 top: 0;
43 width: 1920px;
44 height: 1080px;
45 }
46 </style>
47 </head>
48 <body>
49 <div class="stage">
50 <div class="card-host">
51 <div class="card" data-card-id="ref-spotlight">
52 <style>
53 .card[data-card-id="ref-spotlight"] .root {
54 --ink: #f5f3ff;
55 --muted: #b6b4d0;
56 --accent: #a78bfa;
57 --accent2: #7c6bff;
58 --font-head: ui-serif, "Songti SC", serif;
59 --font-body: ui-sans-serif, system-ui, sans-serif;
60 --font-mono: ui-monospace, monospace;
61
62 width: 100%;
63 height: 100%;
64 position: relative;
65 overflow: hidden;
66 color: var(--ink);
67 font-family: var(--font-body);
68 background:
69 radial-gradient(70% 55% at 28% 30%, rgba(167, 139, 250, 0.35) 0%, transparent 55%),
70 radial-gradient(80% 70% at 80% 80%, rgba(124, 107, 255, 0.22) 0%, transparent 60%),
71 linear-gradient(160deg, #1b1648 0%, #0e0a24 100%);
72 padding: 48px 56px;
73 box-sizing: border-box;
74 display: flex;
75 flex-direction: column;
76 justify-content: center;
77 gap: 22px;
78 }
79 .card[data-card-id="ref-spotlight"] .meta {
80 display: flex;
81 align-items: center;
82 gap: 14px;
83 }
84 .card[data-card-id="ref-spotlight"] .kicker-dot {
85 width: 10px;
86 height: 10px;
87 border-radius: 50%;
88 background: var(--accent);
89 box-shadow:
90 0 0 18px var(--accent),
91 0 0 4px var(--accent);
92 }
93 .card[data-card-id="ref-spotlight"] .kicker {
94 font: 600 16px/1 var(--font-mono);
95 letter-spacing: 0.26em;
96 color: var(--accent);
97 }
98 .card[data-card-id="ref-spotlight"] .title {
99 margin: 0;
100 font: 800 104px/1.05 var(--font-head);
101 color: var(--ink);
102 letter-spacing: -0.005em;
103 text-shadow: 0 4px 60px rgba(167, 139, 250, 0.45);
104 }
105 .card[data-card-id="ref-spotlight"] .hl {
106 color: var(--accent);
107 text-shadow: 0 0 24px rgba(167, 139, 250, 0.7);
108 }
109 .card[data-card-id="ref-spotlight"] .detail {
110 margin: 0;
111 font: 28px/1.55 var(--font-body);
112 color: var(--muted);
113 max-width: 88%;
114 }
115 </style>
116
117 <div class="root">
118 <div class="meta">
119 <span
120 class="kicker-dot"
121 data-anim="scale-pop"
122 data-anim-at="0.05"
123 data-anim-duration="0.4"
124 ></span>
125 <span class="kicker" data-anim="fade-in" data-anim-at="0.1" data-anim-duration="0.4"
126 >TAKEAWAY</span
127 >
128 </div>
129
130 <h2 class="title" data-anim="blur-in" data-anim-at="0.3" data-anim-duration="0.7">
131 在最暗的房间里，<span class="hl">一道光</span>就够了。
132 </h2>
133
134 <p class="detail" data-anim="fade-in" data-anim-at="1.0" data-anim-duration="0.5">
135 所有伟大决定都是在不确定的时候做出的。怕的不是黑，是不敢点亮那一根火柴。
136 </p>
137 </div>
138 </div>
139 </div>
140 </div>
141 </body>
142</html>