如何使用CSS实现弹簧堆栈动画特效

Stack loader，可用来模拟弹簧圈，或者动态协议栈等场合。

css3, stack

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 3504
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html,
body {
    height: 100%;
    background: var(--bg);
}
:root {
    --bg: #393939;
}
#main-wrapper {
    position: relative;
    height: 100%;
    padding: 3em 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
#loader {
    backface-visibility: hidden;
    transform: rotateX(70deg) rotateZ(40deg);
    transform-style: preserve-3d;
    backface-visibility: hidden;
}
.line {
    position: absolute;
    transform: translateZ(calc( var(--index) * 60px));
    transform-style: preserve-3d;
    backface-visibility: hidden;
}
.item {
    --size: 30px;
    position: relative;
    display: block;
    width: var(--largeur);
    height: var(--longueur);
    background: var(--color);
    transform: translateZ(200px);
    transform: translateZ(var(--size));
    transform-style: preserve-3d;
    backface-visibility: hidden;
}
.item:after,
.item:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    backface-visibility: hidden;
}
.item:after {
    height: var(--size);
    width: var(--largeur);
    background-color: inherit;
    transform: rotateX(-90deg) translateY(var(--size)) translateZ(calc(-1 * var(--size) + var(--longueur)));
    transform-origin: 100% 100%;
    filter: brightness(.9);
}
.item:before {
    height: var(--longueur);
    width: var(--size);
    background-color: inherit;
    transform: rotateY(90deg) translateX(var(--size)) translateZ(calc(-1 * var(--size) + var(--largeur)));
    transform-origin: 100% 0;
    filter: brightness(1.1);
}
/*animation*/

#loader {
    animation: pulseall 1s ease-in-out infinite;
}
@keyframes pulseall {
    50% {
        transform: rotateX(70deg) rotateZ(40deg) translateZ(20px);
    }
}
.line:nth-child(2) {
    animation: pulse2 1s ease-in-out infinite;
}
@keyframes pulse2 {
    50% {
        transform: translateZ(calc( var(--index) * 90px));
    }
}
.line:nth-child(3) {
    animation: pulse3 1s ease-in-out infinite;
}
@keyframes pulse3 {
    50% {
        transform: translateZ(calc( var(--index) * 100px));
    }
}

HTML

Stack loader，可用来模拟弹簧圈，或者动态协议栈等场合。

css3, stack

编辑器支持Emmet

快捷键

Stack loader，可用来模拟弹簧圈，或者动态协议栈等场合。

css3, stack

使用CSS3 transform 3d实现的三维轨道图片分割动画特效

学习如何使用CSS3和图片实现人物奔跑动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：