<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>跳动的Loading方块</title>
<style>
* {
box-sizing: border-box;
transition: all 0.15s ease 0s;
}
:root {
--movement: 0.85;
--stop: 0.5;
--duration: calc((var(--movement) * (1 / var(--stop))));
--stagger: 0.1125;
--perspective: 500;
--size: 50;
--ease: cubic-bezier(1, -0.52, 0.26, 0.89);
--bg: #e6e6e6;
--panel: #fff;
--color: #0d0d0d;
--hue: 23;
--saturation: 100;
--lightness: 55;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #1a1a1a;
--panel: #000;
--color: #f2f2f2;
}
}
body {
align-items: center;
background: var(--bg);
display: flex;
justify-content: center;
min-height: 100vh;
overflow: hidden;
}
.scene {
perspective: calc(var(--perspective) * 1px);
}
.word {
display: flex;
transform: translate(calc(var(--size) * 0.7px), 0) rotateX(-30deg)
rotateY(45deg);
transform-style: preserve-3d;
}
.letter__wrap {
-webkit-animation: jump calc(var(--duration) * 1s) calc(
(var(--stagger, 0) * var(--index, 0)) * 1s
)
var(--ease) infinite;
animation: jump calc(var(--duration) * 1s) calc(
(var(--stagger, 0) * var(--index, 0)) * 1s
)
var(--ease) infinite;
transform-origin: bottom center;
transform-style: preserve-3d;
}
.letter__wrap .letter {
-webkit-animation: rotate calc(var(--duration) * 4s) calc(
(var(--stagger, 0) * var(--index, 0)) * 1s
)
ease infinite;
animation: rotate calc(var(--duration) * 4s) calc(
(var(--stagger, 0) * var(--index, 0)) * 1s
)
ease infinite;
}
.letter {
color: var(--color);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 2rem;
font-weight: bold;
height: calc(var(--size) * 1px);
margin-right: calc(var(--size) * 0.2px);
position: relative;
text-transform: uppercase;
transform-style: preserve-3d;
width: calc(var(--size) * 1px);
}
.letter__panel {
align-items: center;
background: var(--panel);
border: 5px hsl(
var(--hue),
calc(var(--saturation) * 1%),
calc(var(--lightness) * 1%)
) solid;
display: flex;
height: calc(var(--size) * 1px);
justify-content: center;
left: 50%;
position: absolute;
top: 50%;
width: calc(var(--size) * 1px);
}
.letter__panel:nth-of-type(1) {
transform: translate3d(-50%, -50%, 0) translate3d(
0,
0,
calc(var(--size) * 0.5px)
);
}
.letter__panel:nth-of-type(2) {
transform: translate3d(-50%, -50%, 0) rotateX(90deg) translate3d(0, 0, calc(var(
--size
) * 0.5px));
}
.letter__panel:nth-of-type(3) {
transform: translate3d(-50%, -50%, 0) rotateX(180deg) translate3d(0, 0, calc(var(
--size
) * 0.5px));
}
.letter__panel:nth-of-type(4) {
transform: translate3d(-50%, -50%, 0) rotateX(-90deg) translate3d(0, 0, calc(var(
--size
) * 0.5px));
}
.letter__panel:nth-of-type(5) {
transform: translate3d(-50%, -50%, 0) rotateY(-90deg) translate3d(0, 0, calc(var(
--size
) * 0.5px));
}
@-webkit-keyframes rotate {
0%,
30.625% {
transform: rotateX(0deg);
}
33.125%,
81.625% {
transform: rotateX(90deg);
}
83.125%,
100% {
transform: rotateX(180deg);
}
}
@keyframes rotate {
0%,
30.625% {
transform: rotateX(0deg);
}
33.125%,
81.625% {
transform: rotateX(90deg);
}
83.125%,
100% {
transform: rotateX(180deg);
}
}
@-webkit-keyframes jump {
0%,
50%,
100% {
transform: scaleX(1) scaleY(1) translate(0, 0);
}
15% {
transform: scaleX(1.2) scaleY(0.8) translate(0, 0);
}
25% {
transform: scaleX(0.9) scaleY(1.1) translate(0, -100%);
}
}
@keyframes jump {
0%,
50%,
100% {
transform: scaleX(1) scaleY(1) translate(0, 0);
}
15% {
transform: scaleX(1.2) scaleY(0.8) translate(0, 0);
}
25% {
transform: scaleX(0.9) scaleY(1.1) translate(0, -100%);
}
}
</style>
</head>
<body>
<div class="scene" style="--hue: 260; --saturation: 94; --lightness: 51">
<div class="word">
<div class="letter__wrap" style="--index: 0">
<div class="letter" data-letter="L">
<span class="letter__panel" aria-hidden="true">L</span
><span class="letter__panel" aria-hidden="true">W</span
><span class="letter__panel" aria-hidden="true">L</span
><span class="letter__panel" aria-hidden="true">W</span
><span class="letter__panel"></span>
</div>
</div>
<div class="letter__wrap" style="--index: 1">
<div class="letter" data-letter="o">
<span class="letter__panel" aria-hidden="true">o</span
><span class="letter__panel" aria-hidden="true">a</span
><span class="letter__panel" aria-hidden="true">o</span
><span class="letter__panel" aria-hidden="true">a</span
><span class="letter__panel"></span>
</div>
</div>
<div class="letter__wrap" style="--index: 2">
<div class="letter" data-letter="a">
<span class="letter__panel" aria-hidden="true">a</span
><span class="letter__panel" aria-hidden="true">i</span
><span class="letter__panel" aria-hidden="true">a</span
><span class="letter__panel" aria-hidden="true">i</span
><span class="letter__panel"></span>
</div>
</div>
<div class="letter__wrap" style="--index: 3">
<div class="letter" data-letter="d">
<span class="letter__panel" aria-hidden="true">d</span
><span class="letter__panel" aria-hidden="true">t</span
><span class="letter__panel" aria-hidden="true">d</span
><span class="letter__panel" aria-hidden="true">t</span
><span class="letter__panel"></span>
</div>
</div>
<div class="letter__wrap" style="--index: 4">
<div class="letter" data-letter="i">
<span class="letter__panel" aria-hidden="true">i</span
><span class="letter__panel" aria-hidden="true">.</span
><span class="letter__panel" aria-hidden="true">i</span
><span class="letter__panel" aria-hidden="true">.</span
><span class="letter__panel"></span>
</div>
</div>
<div class="letter__wrap" style="--index: 5">
<div class="letter" data-letter="n">
<span class="letter__panel" aria-hidden="true">n</span
><span class="letter__panel" aria-hidden="true">.</span
><span class="letter__panel" aria-hidden="true">n</span
><span class="letter__panel" aria-hidden="true">.</span
><span class="letter__panel"></span>
</div>
</div>
<div class="letter__wrap" style="--index: 6">
<div class="letter" data-letter="g">
<span class="letter__panel" aria-hidden="true">g</span
><span class="letter__panel" aria-hidden="true">.</span
><span class="letter__panel" aria-hidden="true">g</span
><span class="letter__panel" aria-hidden="true">.</span
><span class="letter__panel"></span>
</div>
</div>
</div>
</div>
</body>
</html>