HTML
格式化
支持Emmet，输入 p 后按 Tab键试试吧！
<head> ... </head>
<body>
<div class="container">
<div>文
<div>文</div>
<div>文</div>
<div>文</div>
<div>文</div>
<div>文</div>
<div>文</div>
<div>文</div>
<div>文</div>
<div>文</div>
<div>文</div>
</div>
<div>字
<div>字</div>
<div>字</div>
<div>字</div>
<div>字</div>
<div>字</div>
<div>字</div>
<div>字</div>
<div>字</div>
<div>字</div>
<div>字</div>
</div>
<div>动
<div>动</div>
<div>动</div>
<div>动</div>
<div>动</div>
<div>动</div>
<div>动</div>
<div>动</div>
<div>动</div>
<div>动</div>
<div>动</div>
</div>
<div>画
<div>画</div>
<div>画</div>
<div>画</div>
<div>画</div>
<div>画</div>
<div>画</div>
<div>画</div>
<div>画</div>
<div>画</div>
<div>画</div>
</div>
</div></body>
body {
display: grid;
place-items: center;
height: 100vh;
background: #333;
overflow: hidden;
}
/* 容器 */
body .container {
font-weight: 700;
user-select: none;
}
body .container>div {
display: inline-block;
position: relative;
font-size: min(20vw, 50vh);
color: transparent;
transform-origin: center center;
transform-style: preserve-3d;
animation: float 4s infinite;
}
body .container>div:nth-child(1) {
animation-delay: -1.5s;
}
body .container>div:nth-child(2) {
animation-delay: -1s;
}
body .container>div:nth-child(3) {
animation-delay: -0.5s;
}
body .container>div:nth-child(4) {
animation-delay: -0s;
}
body .container>div>div {
position: absolute;
top: 0;
left: 0;
color: white;
text-shadow: 0 0 1px white;
}
body .container>div>div:not(:nth-child(n+3)),
body .container>div>div:not(:nth-last-child(n+3)) {
color: #ef5566;
text-shadow: 0 0 1px #ef5566;
}
body .container>div>div:nth-child(1) {
transform: translateZ(-3.84vmin);
}
body .container>div>div:nth-child(2) {
transform: translateZ(-2.88vmin);
}
body .container>div>div:nth-child(3) {
transform: translateZ(-1.92vmin);
}
body .container>div>div:nth-child(4) {
transform: translateZ(-0.96vmin);
}
body .container>div>div:nth-child(5) {
transform: translateZ(0vmin);
}
body .container>div>div:nth-child(6) {
transform: translateZ(0.96vmin);
}
body .container>div>div:nth-child(7) {
transform: translateZ(1.92vmin);
}
body .container>div>div:nth-child(8) {
transform: translateZ(2.88vmin);
}
body .container>div>div:nth-child(9) {
transform: translateZ(3.84vmin);
}
body .container>div>div:nth-child(10) {
transform: translateZ(4.8vmin);
}
@-webkit-keyframes float {
0% {
transform: rotate3d(0, 1, 0, 30deg);
}
1% {
transform: rotate3d(0.0627905195, 0.9980267284, 0, 30deg);
}
2% {
transform: rotate3d(0.1253332336, 0.9921147013, 0, 30deg);
}
3% {
transform: rotate3d(0.1873813146, 0.9822872507, 0, 30deg);
}
4% {
transform: rotate3d(0.2486898872, 0.9685831611, 0, 30deg);
}
5% {
transform: rotate3d(0.3090169944, 0.9510565163, 0, 30deg);
}
6% {
transform: rotate3d(0.3681245527, 0.9297764859, 0, 30deg);
}
7% {
transform: rotate3d(0.4257792916, 0.9048270525, 0, 30deg);
}
8% {
transform: rotate3d(0.4817536741, 0.87630668, 0, 30deg);
}
9% {
transform: rotate3d(0.535826795, 0.8443279255, 0, 30deg);
}
10% {
transform: rotate3d(0.5877852523, 0.8090169944, 0, 30deg);
}
11% {
transform: rotate3d(0.6374239897, 0.7705132428, 0, 30deg);
}
12% {
transform: rotate3d(0.6845471059, 0.7289686274, 0, 30deg);
}
13% {
transform: rotate3d(0.7289686274, 0.6845471059, 0, 30deg);
}
14% {
transform: rotate3d(0.7705132428, 0.6374239897, 0, 30deg);
}
15% {
transform: rotate3d(0.8090169944, 0.5877852523, 0, 30deg);
}
16% {
transform: rotate3d(0.8443279255, 0.535826795, 0, 30deg);
}
17% {
transform: rotate3d(0.87630668, 0.4817536741, 0, 30deg);
}
18% {
transform: rotate3d(0.9048270525, 0.4257792916, 0, 30deg);
}
19% {
transform: rotate3d(0.9297764859, 0.3681245527, 0, 30deg);
}
20% {
transform: rotate3d(0.9510565163, 0.3090169944, 0, 30deg);
}
21% {
transform: rotate3d(0.9685831611, 0.2486898872, 0, 30deg);
}
22% {
transform: rotate3d(0.9822872507, 0.1873813146, 0, 30deg);
}
23% {
transform: rotate3d(0.9921147013, 0.1253332336, 0, 30deg);
}
24% {
transform: rotate3d(0.9980267284, 0.0627905195, 0, 30deg);
}
25% {
transform: rotate3d(1, 0, 0, 30deg);
}
26% {
transform: rotate3d(0.9980267284, -0.0627905195, 0, 30deg);
}
27% {
transform: rotate3d(0.9921147013, -0.1253332336, 0, 30deg);
}
28% {
transform: rotate3d(0.9822872507, -0.1873813146, 0, 30deg);
}
29% {
transform: rotate3d(0.9685831611, -0.2486898872, 0, 30deg);
}
30% {
transform: rotate3d(0.9510565163, -0.3090169944, 0, 30deg);
}
31% {
transform: rotate3d(0.9297764859, -0.3681245527, 0, 30deg);
}
32% {
transform: rotate3d(0.9048270525, -0.4257792916, 0, 30deg);
}
33% {
transform: rotate3d(0.87630668, -0.4817536741, 0, 30deg);
}
34% {
transform: rotate3d(0.8443279255, -0.535826795, 0, 30deg);
}
35% {
transform: rotate3d(0.8090169944, -0.5877852523, 0, 30deg);
}
36% {
transform: rotate3d(0.7705132428, -0.6374239897, 0, 30deg);
}
37% {
transform: rotate3d(0.7289686274, -0.6845471059, 0, 30deg);
}
38% {
transform: rotate3d(0.6845471059, -0.7289686274, 0, 30deg);
}
39% {
transform: rotate3d(0.6374239897, -0.7705132428, 0, 30deg);
}
40% {
transform: rotate3d(0.5877852523, -0.8090169944, 0, 30deg);
}
41% {
transform: rotate3d(0.535826795, -0.8443279255, 0, 30deg);
}
42% {
transform: rotate3d(0.4817536741, -0.87630668, 0, 30deg);
}
43% {
transform: rotate3d(0.4257792916, -0.9048270525, 0, 30deg);
}
44% {
transform: rotate3d(0.3681245527, -0.9297764859, 0, 30deg);
}
45% {
transform: rotate3d(0.3090169944, -0.9510565163, 0, 30deg);
}
46% {
transform: rotate3d(0.2486898872, -0.9685831611, 0, 30deg);
}
47% {
transform: rotate3d(0.1873813146, -0.9822872507, 0, 30deg);
}
48% {
transform: rotate3d(0.1253332336, -0.9921147013, 0, 30deg);
}
49% {
transform: rotate3d(0.0627905195, -0.9980267284, 0, 30deg);
}
50% {
transform: rotate3d(0, -0.9999999999, 0, 30deg);
}
51% {
transform: rotate3d(-0.0627905195, -0.9980267283, 0, 30deg);
}
52% {
transform: rotate3d(-0.1253332335, -0.9921147011, 0, 30deg);
}
53% {
transform: rotate3d(-0.1873813145, -0.9822872505, 0, 30deg);
}
54% {
transform: rotate3d(-0.2486898871, -0.9685831607, 0, 30deg);
}
55% {
transform: rotate3d(-0.3090169943, -0.9510565157, 0, 30deg);
}
56% {
transform: rotate3d(-0.3681245525, -0.929776485, 0, 30deg);
}
57% {
transform: rotate3d(-0.4257792914, -0.9048270511, 0, 30deg);
}
58% {
transform: rotate3d(-0.4817536738, -0.8763066781, 0, 30deg);
}
59% {
transform: rotate3d(-0.5358267945, -0.8443279226, 0, 30deg);
}
60% {
transform: rotate3d(-0.5877852516, -0.8090169902, 0, 30deg);
}
61% {
transform: rotate3d(-0.6374239888, -0.7705132368, 0, 30deg);
}
62% {
transform: rotate3d(-0.6845471045, -0.7289686189, 0, 30deg);
}
63% {
transform: rotate3d(-0.7289686253, -0.6845470938, 0, 30deg);
}
64% {
transform: rotate3d(-0.7705132398, -0.6374239727, 0, 30deg);
}
65% {
transform: rotate3d(-0.8090169901, -0.5877852283, 0, 30deg);
}
66% {
transform: rotate3d(-0.8443279194, -0.5358267614, 0, 30deg);
}
67% {
transform: rotate3d(-0.8763066715, -0.4817536274, 0, 30deg);
}
68% {
transform: rotate3d(-0.9048270404, -0.425779227, 0, 30deg);
}
69% {
transform: rotate3d(-0.9297764691, -0.3681244637, 0, 30deg);
}
70% {
transform: rotate3d(-0.9510564929, -0.3090168724, 0, 30deg);
}
71% {
transform: rotate3d(-0.9685831287, -0.2486897207, 0, 30deg);
}
72% {
transform: rotate3d(-0.9822872061, -0.1873810883, 0, 30deg);
}
73% {
transform: rotate3d(-0.9921146401, -0.1253329274, 0, 30deg);
}
74% {
transform: rotate3d(-0.9980266448, -0.0627901069, 0, 30deg);
}
75% {
transform: rotate3d(-0.9999998862, 0.0000005537, 0, 30deg);
}
76% {
transform: rotate3d(-0.9980265742, 0.0627912598, 0, 30deg);
}
77% {
transform: rotate3d(-0.9921144932, 0.1253342195, 0, 30deg);
}
78% {
transform: rotate3d(-0.982286971, 0.1873826227, 0, 30deg);
}
79% {
transform: rotate3d(-0.9685827866, 0.2486916166, 0, 30deg);
}
80% {
transform: rotate3d(-0.9510560166, 0.3090192726, 0, 30deg);
}
81% {
transform: rotate3d(-0.9297758216, 0.3681275437, 0, 30deg);
}
82% {
transform: rotate3d(-0.9048261725, 0.425783205, 0, 30deg);
}
83% {
transform: rotate3d(-0.8763055184, 0.4817587777, 0, 30deg);
}
84% {
transform: rotate3d(-0.8443263971, 0.5358334293, 0, 30deg);
}
85% {
transform: rotate3d(-0.80901499, 0.5877938496, 0, 30deg);
}
86% {
transform: rotate3d(-0.7705106226, 0.6374350969, 0, 30deg);
}
87% {
transform: rotate3d(-0.7289652129, 0.6845614127, 0, 30deg);
}
88% {
transform: rotate3d(-0.6845426698, 0.7289870018, 0, 30deg);
}
89% {
transform: rotate3d(-0.6374182434, 0.7705367741, 0, 30deg);
}
90% {
transform: rotate3d(-0.5877778306, 0.8090470459, 0, 30deg);
}
91% {
transform: rotate3d(-0.5358172367, 0.8443661994, 0, 30deg);
}
92% {
transform: rotate3d(-0.4817413984, 0.876355296, 0, 30deg);
}
93% {
transform: rotate3d(-0.4257635689, 0.904888644, 0, 30deg);
}
94% {
transform: rotate3d(-0.3681044689, 0.9298543169, 0, 30deg);
}
95% {
transform: rotate3d(-0.3089914068, 0.9511546228, 0, 30deg);
}
96% {
transform: rotate3d(-0.2486573708, 0.9687065223, 0, 30deg);
}
97% {
transform: rotate3d(-0.1873400968, 0.9824419959, 0, 30deg);
}
98% {
transform: rotate3d(-0.1252811139, 0.9923083591, 0, 30deg);
}
99% {
transform: rotate3d(-0.062724773, 0.9982685263, 0, 30deg);
}
100% {
transform: rotate3d(0.000082741, 1.000301224, 0, 30deg);
}
}
@keyframes float {
0% {
transform: rotate3d(0, 1, 0, 30deg);
}
1% {
transform: rotate3d(0.0627905195, 0.9980267284, 0, 30deg);
}
2% {
transform: rotate3d(0.1253332336, 0.9921147013, 0, 30deg);
}
3% {
transform: rotate3d(0.1873813146, 0.9822872507, 0, 30deg);
}
4% {
transform: rotate3d(0.2486898872, 0.9685831611, 0, 30deg);
}
5% {
transform: rotate3d(0.3090169944, 0.9510565163, 0, 30deg);
}
6% {
transform: rotate3d(0.3681245527, 0.9297764859, 0, 30deg);
}
7% {
transform: rotate3d(0.4257792916, 0.9048270525, 0, 30deg);
}
8% {
transform: rotate3d(0.4817536741, 0.87630668, 0, 30deg);
}
9% {
transform: rotate3d(0.535826795, 0.8443279255, 0, 30deg);
}
10% {
transform: rotate3d(0.5877852523, 0.8090169944, 0, 30deg);
}
11% {
transform: rotate3d(0.6374239897, 0.7705132428, 0, 30deg);
}
12% {
transform: rotate3d(0.6845471059, 0.7289686274, 0, 30deg);
}
13% {
transform: rotate3d(0.7289686274, 0.6845471059, 0, 30deg);
}
14% {
transform: rotate3d(0.7705132428, 0.6374239897, 0, 30deg);
}
15% {
transform: rotate3d(0.8090169944, 0.5877852523, 0, 30deg);
}
16% {
transform: rotate3d(0.8443279255, 0.535826795, 0, 30deg);
}
17% {
transform: rotate3d(0.87630668, 0.4817536741, 0, 30deg);
}
18% {
transform: rotate3d(0.9048270525, 0.4257792916, 0, 30deg);
}
19% {
transform: rotate3d(0.9297764859, 0.3681245527, 0, 30deg);
}
20% {
transform: rotate3d(0.9510565163, 0.3090169944, 0, 30deg);
}
21% {
transform: rotate3d(0.9685831611, 0.2486898872, 0, 30deg);
}
22% {
transform: rotate3d(0.9822872507, 0.1873813146, 0, 30deg);
}
23% {
transform: rotate3d(0.9921147013, 0.1253332336, 0, 30deg);
}
24% {
transform: rotate3d(0.9980267284, 0.0627905195, 0, 30deg);
}
25% {
transform: rotate3d(1, 0, 0, 30deg);
}
26% {
transform: rotate3d(0.9980267284, -0.0627905195, 0, 30deg);
}
27% {
transform: rotate3d(0.9921147013, -0.1253332336, 0, 30deg);
}
28% {
transform: rotate3d(0.9822872507, -0.1873813146, 0, 30deg);
}
29% {
transform: rotate3d(0.9685831611, -0.2486898872, 0, 30deg);
}
30% {
transform: rotate3d(0.9510565163, -0.3090169944, 0, 30deg);
}
31% {
transform: rotate3d(0.9297764859, -0.3681245527, 0, 30deg);
}
32% {
transform: rotate3d(0.9048270525, -0.4257792916, 0, 30deg);
}
33% {
transform: rotate3d(0.87630668, -0.4817536741, 0, 30deg);
}
34% {
transform: rotate3d(0.8443279255, -0.535826795, 0, 30deg);
}
35% {
transform: rotate3d(0.8090169944, -0.5877852523, 0, 30deg);
}
36% {
transform: rotate3d(0.7705132428, -0.6374239897, 0, 30deg);
}
37% {
transform: rotate3d(0.7289686274, -0.6845471059, 0, 30deg);
}
38% {
transform: rotate3d(0.6845471059, -0.7289686274, 0, 30deg);
}
39% {
transform: rotate3d(0.6374239897, -0.7705132428, 0, 30deg);
}
40% {
transform: rotate3d(0.5877852523, -0.8090169944, 0, 30deg);
}
41% {
transform: rotate3d(0.535826795, -0.8443279255, 0, 30deg);
}
42% {
transform: rotate3d(0.4817536741, -0.87630668, 0, 30deg);
}
43% {
transform: rotate3d(0.4257792916, -0.9048270525, 0, 30deg);
}
44% {
transform: rotate3d(0.3681245527, -0.9297764859, 0, 30deg);
}
45% {
transform: rotate3d(0.3090169944, -0.9510565163, 0, 30deg);
}
46% {
transform: rotate3d(0.2486898872, -0.9685831611, 0, 30deg);
}
47% {
transform: rotate3d(0.1873813146, -0.9822872507, 0, 30deg);
}
48% {
transform: rotate3d(0.1253332336, -0.9921147013, 0, 30deg);
}
49% {
transform: rotate3d(0.0627905195, -0.9980267284, 0, 30deg);
}
50% {
transform: rotate3d(0, -0.9999999999, 0, 30deg);
}
51% {
transform: rotate3d(-0.0627905195, -0.9980267283, 0, 30deg);
}
52% {
transform: rotate3d(-0.1253332335, -0.9921147011, 0, 30deg);
}
53% {
transform: rotate3d(-0.1873813145, -0.9822872505, 0, 30deg);
}
54% {
transform: rotate3d(-0.2486898871, -0.9685831607, 0, 30deg);
}
55% {
transform: rotate3d(-0.3090169943, -0.9510565157, 0, 30deg);
}
56% {
transform: rotate3d(-0.3681245525, -0.929776485, 0, 30deg);
}
57% {
transform: rotate3d(-0.4257792914, -0.9048270511, 0, 30deg);
}
58% {
transform: rotate3d(-0.4817536738, -0.8763066781, 0, 30deg);
}
59% {
transform: rotate3d(-0.5358267945, -0.8443279226, 0, 30deg);
}
60% {
transform: rotate3d(-0.5877852516, -0.8090169902, 0, 30deg);
}
61% {
transform: rotate3d(-0.6374239888, -0.7705132368, 0, 30deg);
}
62% {
transform: rotate3d(-0.6845471045, -0.7289686189, 0, 30deg);
}
63% {
transform: rotate3d(-0.7289686253, -0.6845470938, 0, 30deg);
}
64% {
transform: rotate3d(-0.7705132398, -0.6374239727, 0, 30deg);
}
65% {
transform: rotate3d(-0.8090169901, -0.5877852283, 0, 30deg);
}
66% {
transform: rotate3d(-0.8443279194, -0.5358267614, 0, 30deg);
}
67% {
transform: rotate3d(-0.8763066715, -0.4817536274, 0, 30deg);
}
68% {
transform: rotate3d(-0.9048270404, -0.425779227, 0, 30deg);
}
69% {
transform: rotate3d(-0.9297764691, -0.3681244637, 0, 30deg);
}
70% {
transform: rotate3d(-0.9510564929, -0.3090168724, 0, 30deg);
}
71% {
transform: rotate3d(-0.9685831287, -0.2486897207, 0, 30deg);
}
72% {
transform: rotate3d(-0.9822872061, -0.1873810883, 0, 30deg);
}
73% {
transform: rotate3d(-0.9921146401, -0.1253329274, 0, 30deg);
}
74% {
transform: rotate3d(-0.9980266448, -0.0627901069, 0, 30deg);
}
75% {
transform: rotate3d(-0.9999998862, 0.0000005537, 0, 30deg);
}
76% {
transform: rotate3d(-0.9980265742, 0.0627912598, 0, 30deg);
}
77% {
transform: rotate3d(-0.9921144932, 0.1253342195, 0, 30deg);
}
78% {
transform: rotate3d(-0.982286971, 0.1873826227, 0, 30deg);
}
79% {
transform: rotate3d(-0.9685827866, 0.2486916166, 0, 30deg);
}
80% {
transform: rotate3d(-0.9510560166, 0.3090192726, 0, 30deg);
}
81% {
transform: rotate3d(-0.9297758216, 0.3681275437, 0, 30deg);
}
82% {
transform: rotate3d(-0.9048261725, 0.425783205, 0, 30deg);
}
83% {
transform: rotate3d(-0.8763055184, 0.4817587777, 0, 30deg);
}
84% {
transform: rotate3d(-0.8443263971, 0.5358334293, 0, 30deg);
}
85% {
transform: rotate3d(-0.80901499, 0.5877938496, 0, 30deg);
}
86% {
transform: rotate3d(-0.7705106226, 0.6374350969, 0, 30deg);
}
87% {
transform: rotate3d(-0.7289652129, 0.6845614127, 0, 30deg);
}
88% {
transform: rotate3d(-0.6845426698, 0.7289870018, 0, 30deg);
}
89% {
transform: rotate3d(-0.6374182434, 0.7705367741, 0, 30deg);
}
90% {
transform: rotate3d(-0.5877778306, 0.8090470459, 0, 30deg);
}
91% {
transform: rotate3d(-0.5358172367, 0.8443661994, 0, 30deg);
}
92% {
transform: rotate3d(-0.4817413984, 0.876355296, 0, 30deg);
}
93% {
transform: rotate3d(-0.4257635689, 0.904888644, 0, 30deg);
}
94% {
transform: rotate3d(-0.3681044689, 0.9298543169, 0, 30deg);
}
95% {
transform: rotate3d(-0.3089914068, 0.9511546228, 0, 30deg);
}
96% {
transform: rotate3d(-0.2486573708, 0.9687065223, 0, 30deg);
}
97% {
transform: rotate3d(-0.1873400968, 0.9824419959, 0, 30deg);
}
98% {
transform: rotate3d(-0.1252811139, 0.9923083591, 0, 30deg);
}
99% {
transform: rotate3d(-0.062724773, 0.9982685263, 0, 30deg);
}
100% {
transform: rotate3d(0.000082741, 1.000301224, 0, 30deg);
}
}预览
控制台