Setting the file. One moment. 34.18
Xhs
(opens in a new tab)
references/styles/xhs.html
HTML·206 lines·7 KB
frames: clean, polaroid
16 content: 社交剪辑 / 生活方式 / 种草 / 短视频高光
17-->
18<!doctype html>
19<html lang="zh-CN">
20 <head>
21 <meta charset="utf-8" />
22 <title>style · xhs (小红书)</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-xhs">
52 <style>
53 .card[data-card-id="ref-xhs"] .root {
54 --bg: #fff5e9;
55 --ink: #1d1418;
56 --muted: #8a7a78;
57 --accent: #ff2e63;
58 --accent2: #ff8a4c;
59 --accent3: #f0c419;
60 --font-sans: ui-sans-serif, system-ui, "PingFang SC", "Hiragino Sans GB", sans-serif;
61
62 width: 100%;
63 height: 100%;
64 position: relative;
65 overflow: hidden;
66 background: var(--bg);
67 color: var(--ink);
68 font-family: var(--font-sans);
69 padding: 36px 44px;
70 box-sizing: border-box;
71 display: flex;
72 flex-direction: column;
73 gap: 22px;
74 }
75 .card[data-card-id="ref-xhs"] .user-row {
76 display: flex;
77 align-items: center;
78 gap: 14px;
79 }
80 .card[data-card-id="ref-xhs"] .avatar {
81 width: 56px;
82 height: 56px;
83 border-radius: 50%;
84 background: linear-gradient(135deg, #ff2e63, #ff8a4c);
85 box-shadow:
86 0 0 0 3px #fff,
87 0 0 0 4px rgba(255, 46, 99, 0.3);
88 }
89 .card[data-card-id="ref-xhs"] .user-info {
90 flex: 1;
91 }
92 .card[data-card-id="ref-xhs"] .user-name {
93 font: 700 22px/1.1 var(--font-sans);
94 color: var(--ink);
95 }
96 .card[data-card-id="ref-xhs"] .user-sub {
97 font: 400 16px/1.3 var(--font-sans);
98 color: var(--muted);
99 }
100 .card[data-card-id="ref-xhs"] .follow {
101 padding: 8px 20px;
102 border-radius: 999px;
103 background: var(--accent);
104 color: #fff;
105 font: 700 16px/1 var(--font-sans);
106 }
107 .card[data-card-id="ref-xhs"] .title {
108 margin: 0;
109 font: 800 84px/1.1 var(--font-sans);
110 color: var(--ink);
111 letter-spacing: -0.01em;
112 }
113 .card[data-card-id="ref-xhs"] .title .heart {
114 color: var(--accent);
115 }
116 .card[data-card-id="ref-xhs"] .detail {
117 margin: 0;
118 font: 500 28px/1.5 var(--font-sans);
119 color: var(--ink);
120 max-width: 94%;
121 }
122 .card[data-card-id="ref-xhs"] .tags {
123 display: flex;
124 flex-wrap: wrap;
125 gap: 10px;
126 }
127 .card[data-card-id="ref-xhs"] .tag {
128 padding: 8px 18px;
129 border-radius: 999px;
130 background: rgba(255, 46, 99, 0.12);
131 color: var(--accent);
132 font: 600 18px/1 var(--font-sans);
133 }
134 .card[data-card-id="ref-xhs"] .tag.orange {
135 background: rgba(255, 138, 76, 0.16);
136 color: var(--accent2);
137 }
138 .card[data-card-id="ref-xhs"] .tag.yellow {
139 background: rgba(240, 196, 25, 0.18);
140 color: #a98209;
141 }
142 .card[data-card-id="ref-xhs"] .interactions {
143 display: flex;
144 gap: 28px;
145 margin-top: auto;
146 padding-top: 14px;
147 border-top: 1px solid rgba(0, 0, 0, 0.06);
148 font: 700 22px/1 var(--font-sans);
149 color: var(--ink);
150 }
151 .card[data-card-id="ref-xhs"] .interactions span {
152 display: inline-flex;
153 align-items: center;
154 gap: 8px;
155 }
156 .card[data-card-id="ref-xhs"] .interactions .heart-ic {
157 color: var(--accent);
158 font-size: 26px;
159 }
160 </style>
161
162 <div class="root">
163 <div class="user-row" data-anim="fade-in" data-anim-at="0.05" data-anim-duration="0.4">
164 <div class="avatar"></div>
165 <div class="user-info">
166 <div class="user-name">@小研究员</div>
167 <div class="user-sub">关注我，看我每天拆一段视频 · 18分钟前</div>
168 </div>
169 <div class="follow">+ 关注</div>
170 </div>
171
172 <h2 class="title" data-anim="fade-in" data-anim-at="0.3" data-anim-duration="0.5">
173 亲测有效！<span class="heart">♥</span> 30 秒抓住注意力的小技巧
174 </h2>
175
176 <p class="detail" data-anim="fade-in" data-anim-at="0.7" data-anim-duration="0.45">
177 开头别废话——直接抛结论。听众的大脑在前 3 秒就决定要不要继续，
178 这是平台算法之外，最朴素也最重要的事实。
179 </p>
180
181 <div class="tags" data-anim="fade-in" data-anim-at="1.0" data-anim-duration="0.4">
182 <span class="tag">#内容创作</span>
183 <span class="tag orange">#播客剪辑</span>
184 <span class="tag yellow">#开头技巧</span>
185 </div>
186
187 <div
188 class="interactions"
189 data-anim="fade-in"
190 data-anim-at="1.25"
191 data-anim-duration="0.4"
192 >
193 <span><span class="heart-ic">♥</span> 12.4k</span>
194 <span>💬 386</span>
195 <span>⭐ 891</span>
196 <span
197 style="margin-left: auto; color: var(--muted); font-weight: 400; font-size: 18px"
198 >📤 分享</span
199 >
200 </div>
201 </div>
202 </div>
203 </div>
204 </div>
205 </body>
206</html>