Setting the file. One moment. 34.13
Minimal
(opens in a new tab)
references/styles/minimal.html
HTML·130 lines·4 KB
16<!doctype html>
17<html lang="zh-CN">
18 <head>
19 <meta charset="utf-8" />
20 <title>style · minimal</title>
21 <style>
22 html,
23 body {
24 margin: 0;
25 padding: 0;
26 background: #0a0c12;
27 font-family: ui-sans-serif, system-ui, sans-serif;
28 }
29 .stage {
30 position: relative;
31 width: 1920px;
32 height: 1080px;
33 transform-origin: top left;
34 transform: scale(0.5);
35 overflow: hidden;
36 }
37 .card-host {
38 position: absolute;
39 left: 0;
40 top: 0;
41 width: 1920px;
42 height: 1080px;
43 }
44 </style>
45 </head>
46 <body>
47 <div class="stage">
48 <div class="card-host">
49 <div class="card" data-card-id="ref-minimal">
50 <style>
51 .card[data-card-id="ref-minimal"] .root {
52 --bg: #ffffff;
53 --ink: #000000;
54 --muted: #6b7280;
55 --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
56
57 width: 100%;
58 height: 100%;
59 position: relative;
60 overflow: hidden;
61 background: var(--bg);
62 color: var(--ink);
63 padding: 80px 96px;
64 box-sizing: border-box;
65 display: flex;
66 flex-direction: column;
67 justify-content: center;
68 gap: 56px;
69 font-family: var(--font-sans);
70 }
71 .card[data-card-id="ref-minimal"] .kicker {
72 font: 600 14px/1 var(--font-sans);
73 letter-spacing: 0.32em;
74 color: var(--ink);
75 text-transform: uppercase;
76 }
77 .card[data-card-id="ref-minimal"] .title {
78 margin: 0;
79 font: 900 132px/0.95 var(--font-sans);
80 color: var(--ink);
81 letter-spacing: -0.04em;
82 }
83 .card[data-card-id="ref-minimal"] .detail {
84 margin: 0;
85 font: 400 36px/1.4 var(--font-sans);
86 color: var(--muted);
87 max-width: 82%;
88 letter-spacing: -0.005em;
89 }
90 .card[data-card-id="ref-minimal"] .rule {
91 width: 0;
92 height: 4px;
93 background: var(--ink);
94 }
95 </style>
96
97 <div class="root">
98 <span class="kicker" data-anim="fade-in" data-anim-at="0.05" data-anim-duration="0.4"
99 >TAKEAWAY</span
100 >
101
102 <h1
103 class="title"
104 data-anim="kinetic-chars"
105 data-anim-at="0.3"
106 data-anim-duration="0.6"
107 data-anim-stagger="0.05"
108 data-anim-pattern="pop"
109 >
110 <span class="char">五</span><span class="char">秒</span><span class="char">决</span
111 ><span class="char">定</span> <span class="char">一</span><span class="char">切</span>
112 </h1>
113
114 <div
115 class="rule"
116 data-anim="grow-x"
117 data-anim-at="0.9"
118 data-anim-duration="0.5"
119 data-anim-target-w="240"
120 ></div>
121
122 <p class="detail" data-anim="fade-in" data-anim-at="1.05" data-anim-duration="0.45">
123 用户给一个新界面的时间不超过五秒。这意味着第一屏不需要解释，需要让人立刻知道这是什么、为什么有用。
124 </p>
125 </div>
126 </div>
127 </div>
128 </div>
129 </body>
130</html>