SVG绘制的缓存加载（buffer loader）动画

分层次数据缓存加载动画

svg, buffer, layers, loader

《three.js使用多个渐变torus模拟光环光晕》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    background: #fff;
}
.buffer {
    width: 20em;
    position: absolute;
    left: 50%;
    top: 3em;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}
.layer {
    fill: #4b4b4b;
    -webkit-transition: all 21s ease-out;
    transition: all 21s ease-out;
}
.loading .layer1 {
    -webkit-animation: 4s linear infinite;
    animation: 4s linear infinite;
    -webkit-animation-name: cycle1;
    animation-name: cycle1;
}
.loading .layer2 {
    -webkit-animation: 4s linear infinite;
    animation: 4s linear infinite;
    -webkit-animation-name: cycle2;
    animation-name: cycle2;
}
.loading .layer3 {
    -webkit-animation: 4s linear infinite;
    animation: 4s linear infinite;
    -webkit-animation-name: cycle3;
    animation-name: cycle3;
}
body {
    font-family: Helvetica, Arial, Sans-serif;
}
h1 {
    text-align: center;
    color: #aaa;
    margin: 2em 0 2em;
    font-size: 1.5em;
}
p {
    text-align: center;
}
a {
    color: #999;
}
button {
    font-size: 1.25em;
    display: block;
    margin: 1em auto;
    border: none;
    color: #fff;
    padding: 1em 2em;
    -webkit-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
    background: #4ea493;
    -webkit-box-shadow: 0 0.4em 0 -0.2em #2d5f55;
    box-shadow: 0 0.4em 0 -0.2em #2d5f55;
}
button.go {
    background: #4b4b4b;
    -webkit-box-shadow: 0 0.4em 0 -0.2em #181818;
    box-shadow: 0 0.4em 0 -0.2em #181818;
}
button:focus {
    outline: none;
}
@-webkit-keyframes cycle1 {
    0%, 65% {
        fill: #b2b2b2;
    }
    75%,
    82% {
        fill: #4b4b4b;
    }
    92%,
    100% {
        fill: #b2b2b2;
    }
}
@keyframes cycle1 {
    0%, 65% {
        fill: #b2b2b2;
    }
    75%,
    82% {
        fill: #4b4b4b;
    }
    92%,
    100% {
        fill: #b2b2b2;
    }
}
@-webkit-keyframes cycle2 {
    0%, 40% {
        fill: #b2b2b2;
    }
    50%,
    86% {
        fill: #4b4b4b;
    }
    96%,
    100% {
        fill: #b2b2b2;
    }
}
@keyframes cycle2 {
    0%, 40% {
        fill: #b2b2b2;
    }
    50%,
    86% {
        fill: #4b4b4b;
    }
    96%,
    100% {
        fill: #b2b2b2;
    }
}
@-webkit-keyframes cycle3 {
    0%, 15% {
        fill: #b2b2b2;
    }
    25%,
    90% {
        fill: #4b4b4b;
    }
    100% {
        fill: #b2b2b2;
    }
}
@keyframes cycle3 {
    0%, 15% {
        fill: #b2b2b2;
    }
    25%,
    90% {
        fill: #4b4b4b;
    }
    100% {
        fill: #b2b2b2;
    }
}

HTML

分层次数据缓存加载动画

svg, buffer, layers, loader

编辑器支持Emmet

快捷键

分层次数据缓存加载动画

svg, buffer, layers, loader

SVG feDisplacementMap + feTurbulence做的水母颤抖动画

gsap和svg filter实现乱流（turbulence）加载动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：