Setting the file. One moment. 34.12
Geom
(opens in a new tab)
references/styles/geom.html
HTML·181 lines·6 KB
16 frames: clean, hairline
17 content: 产品发布 / 大胆宣言 / 撞色封面 / 短视频高光
18-->
19<!doctype html>
20<html lang="zh-CN">
21 <head>
22 <meta charset="utf-8" />
23 <title>style · geom</title>
24 <style>
25 html,
26 body {
27 margin: 0;
28 padding: 0;
29 background: #0a0c12;
30 font-family: ui-sans-serif, system-ui, sans-serif;
31 }
32 .stage {
33 position: relative;
34 width: 1920px;
35 height: 1080px;
36 transform-origin: top left;
37 transform: scale(0.5);
38 overflow: hidden;
39 }
40 .card-host {
41 position: absolute;
42 left: 0;
43 top: 0;
44 width: 1920px;
45 height: 1080px;
46 }
47 </style>
48 </head>
49 <body>
50 <div class="stage">
51 <div class="card-host">
52 <div class="card" data-card-id="ref-geom">
53 <style>
54 .card[data-card-id="ref-geom"] .root {
55 --bg: #0a0a0a;
56 --ink: #ffffff;
57 --muted: #aaaaaa;
58 --accent: #d4ff00;
59 --accent2: #ff2e88;
60 --accent3: #ffffff;
61 --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
62 --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
63
64 width: 100%;
65 height: 100%;
66 position: relative;
67 overflow: hidden;
68 background: var(--bg);
69 color: var(--ink);
70 font-family: var(--font-sans);
71 }
72 .card[data-card-id="ref-geom"] .slab-1 {
73 position: absolute;
74 left: 0;
75 top: 0;
76 width: 540px;
77 height: 200px;
78 background: var(--accent);
79 }
80 .card[data-card-id="ref-geom"] .slab-2 {
81 position: absolute;
82 right: 0;
83 bottom: 0;
84 width: 360px;
85 height: 360px;
86 background: var(--accent2);
87 }
88 .card[data-card-id="ref-geom"] .stripe {
89 position: absolute;
90 left: -40px;
91 top: 760px;
92 height: 4px;
93 width: 600px;
94 background: var(--accent3);
95 transform: rotate(-6deg);
96 }
97 .card[data-card-id="ref-geom"] .content {
98 position: absolute;
99 left: 64px;
100 top: 240px;
101 right: 480px;
102 bottom: 80px;
103 display: flex;
104 flex-direction: column;
105 justify-content: center;
106 gap: 28px;
107 }
108 .card[data-card-id="ref-geom"] .kicker {
109 align-self: flex-start;
110 padding: 8px 14px;
111 background: var(--ink);
112 color: var(--bg);
113 font: 800 18px/1 var(--font-mono);
114 letter-spacing: 0.24em;
115 }
116 .card[data-card-id="ref-geom"] .title {
117 margin: 0;
118 font: 900 156px/0.92 var(--font-sans);
119 color: var(--ink);
120 letter-spacing: -0.04em;
121 text-transform: uppercase;
122 }
123 .card[data-card-id="ref-geom"] .stroke {
124 -webkit-text-stroke: 3px var(--accent);
125 color: transparent;
126 }
127 .card[data-card-id="ref-geom"] .detail {
128 margin: 0;
129 font: 600 26px/1.4 var(--font-sans);
130 color: var(--muted);
131 max-width: 88%;
132 }
133 .card[data-card-id="ref-geom"] .detail .pink {
134 color: var(--accent2);
135 }
136 </style>
137
138 <div class="root">
139 <span
140 class="slab-1"
141 data-anim="slide-in"
142 data-anim-at="0.1"
143 data-anim-duration="0.45"
144 data-anim-from="left"
145 data-anim-distance="540"
146 ></span>
147 <span
148 class="slab-2"
149 data-anim="slide-in"
150 data-anim-at="0.25"
151 data-anim-duration="0.45"
152 data-anim-from="right"
153 data-anim-distance="360"
154 ></span>
155 <span
156 class="stripe"
157 data-anim="grow-x"
158 data-anim-at="0.5"
159 data-anim-duration="0.5"
160 data-anim-target-w="600"
161 ></span>
162
163 <div class="content">
164 <span class="kicker" data-anim="fade-in" data-anim-at="0.05" data-anim-duration="0.4"
165 >TAKEAWAY</span
166 >
167
168 <h1 class="title" data-anim="fade-in" data-anim-at="0.55" data-anim-duration="0.5">
169 <span class="stroke">BIG</span><br />IDEA.
170 </h1>
171
172 <p class="detail" data-anim="fade-in" data-anim-at="0.95" data-anim-duration="0.4">
173 别再做温和的中间方案。要么<span class="pink">最大胆</span>，要么不做。
174 </p>
175 </div>
176 </div>
177 </div>
178 </div>
179 </div>
180 </body>
181</html>