Setting the file. One moment. 34.17
Whiteboard
(opens in a new tab)
references/styles/whiteboard.html
HTML·170 lines·6 KB
16 frames: polaroid, clean
17 content: 教程 / 解构 / 草图思考 / 灵感整理
18 Notes
19 - SVG strokes have subtle path jitter to look hand-drawn.
20 - data-anim "draw-path" is ideal for the sketched border + highlights.
21-->
22<!doctype html>
23<html lang="zh-CN">
24 <head>
25 <meta charset="utf-8" />
26 <title>style · whiteboard</title>
27 <style>
28 html,
29 body {
30 margin: 0;
31 padding: 0;
32 background: #0a0c12;
33 font-family: ui-sans-serif, system-ui, sans-serif;
34 }
35 .stage {
36 position: relative;
37 width: 1920px;
38 height: 1080px;
39 transform-origin: top left;
40 transform: scale(0.5);
41 overflow: hidden;
42 }
43 .card-host {
44 position: absolute;
45 left: 0;
46 top: 0;
47 width: 1920px;
48 height: 1080px;
49 }
50 </style>
51 </head>
52 <body>
53 <div class="stage">
54 <div class="card-host">
55 <div class="card" data-card-id="ref-whiteboard">
56 <style>
57 .card[data-card-id="ref-whiteboard"] .root {
58 --bg: #fdf6e3;
59 --ink: #1a1a1a;
60 --muted: #6e6a5b;
61 --accent: #ff6b35;
62 --accent2: #2557a7;
63 --accent3: #ffe066;
64 --font-hand: "Caveat", "LXGW WenKai TC", ui-serif, cursive;
65
66 width: 100%;
67 height: 100%;
68 position: relative;
69 overflow: hidden;
70 background-color: var(--bg);
71 background-image:
72 radial-gradient(circle at 30% 20%, rgba(0, 0, 0, 0.025) 0%, transparent 50%),
73 radial-gradient(circle at 80% 70%, rgba(0, 0, 0, 0.02) 0%, transparent 50%);
74 padding: 48px 56px;
75 box-sizing: border-box;
76 display: flex;
77 flex-direction: column;
78 justify-content: center;
79 gap: 26px;
80 color: var(--ink);
81 font-family: var(--font-hand);
82 }
83 .card[data-card-id="ref-whiteboard"] .sketch-border {
84 position: absolute;
85 inset: 16px;
86 pointer-events: none;
87 }
88 .card[data-card-id="ref-whiteboard"] .sketch-border path {
89 stroke: var(--ink);
90 stroke-width: 3;
91 fill: none;
92 stroke-linecap: round;
93 stroke-linejoin: round;
94 }
95 .card[data-card-id="ref-whiteboard"] .kicker {
96 align-self: flex-start;
97 font: 700 32px/1 var(--font-hand);
98 color: var(--accent);
99 transform: rotate(-2deg);
100 padding-left: 8px;
101 }
102 .card[data-card-id="ref-whiteboard"] .title {
103 margin: 0;
104 font: 700 120px/1 var(--font-hand);
105 color: var(--ink);
106 }
107 .card[data-card-id="ref-whiteboard"] .marker {
108 position: relative;
109 display: inline-block;
110 padding: 0 8px;
111 color: var(--ink);
112 }
113 .card[data-card-id="ref-whiteboard"] .marker::before {
114 content: "";
115 position: absolute;
116 left: 0;
117 right: 0;
118 top: 30%;
119 bottom: 18%;
120 background: var(--accent3);
121 z-index: -1;
122 transform: skewX(-4deg);
123 }
124 .card[data-card-id="ref-whiteboard"] .detail {
125 margin: 0;
126 font: 400 40px/1.4 var(--font-hand);
127 color: var(--muted);
128 max-width: 92%;
129 }
130 .card[data-card-id="ref-whiteboard"] .note {
131 align-self: flex-start;
132 padding: 6px 12px;
133 font: 600 28px/1 var(--font-hand);
134 color: var(--accent2);
135 border-bottom: 3px wavy var(--accent2);
136 transform: rotate(-1deg);
137 }
138 </style>
139
140 <div class="root">
141 <svg class="sketch-border" viewBox="0 0 1888 1048" preserveAspectRatio="none">
142 <path
143 d="M 12 12 L 1876 16 L 1872 1036 L 16 1032 Z"
144 data-anim="draw-path"
145 data-anim-at="0.05"
146 data-anim-duration="0.8"
147 />
148 </svg>
149
150 <span class="kicker" data-anim="fade-in" data-anim-at="0.1" data-anim-duration="0.4">
151 ✎ TAKEAWAY
152 </span>
153
154 <h2 class="title" data-anim="fade-in" data-anim-at="0.4" data-anim-duration="0.5">
155 把复杂问题<span class="marker">画出来</span>。
156 </h2>
157
158 <p class="detail" data-anim="fade-in" data-anim-at="0.85" data-anim-duration="0.45">
159 文字让人争辩，图让人对齐。当所有人都在白板前看同一张图，分歧自然消失。
160 </p>
161
162 <span class="note" data-anim="fade-in" data-anim-at="1.2" data-anim-duration="0.4">
163 ← 试试每次会议都画
164 </span>
165 </div>
166 </div>
167 </div>
168 </div>
169 </body>
170</html>