这是一款纯CSS3 3D立方体跳动翻转Loading动画特效。该Loading特效中，通过css3的animation动画，制作出不断翻转跳跃的立方体，组成炫酷的Loading动画效果。
使用方法
HTML代码
<div class="scene" style="--hue: 260; --saturation: 86; --lightness: 55">
<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>
CSS代码
* {
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;
}
}
.container {
align-items: center;
background: var(--bg);
display: flex;
justify-content: center;
min-height: 50vh;
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%);
}
}
codepen网址：https://codepen.io/jh3y/pen/VwLdVoZ
