CSS3 一个简单的变形弹性圆圈加载动画

CSS3 Elastic Ring

css3, circle

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

.container {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background: #292970;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
}
.flex {
    min-height: 60pt;
}
@-webkit-keyframes loading {
    0% {
        width: 50pt;
        height: 50pt;
        margin-top: 0;
    }
    25% {
        height: 4pt;
        margin-top: 23pt;
    }
    50% {
        width: 4pt;
    }
    75% {
        width: 50pt;
    }
    100% {
        width: 50pt;
        height: 50pt;
        margin-top: 0;
    }
}
@keyframes loading {
    0% {
        width: 50pt;
        height: 50pt;
        margin-top: 0;
    }
    25% {
        height: 4pt;
        margin-top: 23pt;
    }
    50% {
        width: 4pt;
    }
    75% {
        width: 50pt;
    }
    100% {
        width: 50pt;
        height: 50pt;
        margin-top: 0;
    }
}
.loader {
    width: 50pt;
    height: 50pt;
    border-radius: 100%;
    border: #6767fa 4pt solid;
    margin-left: auto;
    margin-right: auto;
    background-color: transparent;
    -webkit-animation: loading 1s infinite;
    animation: loading 1s infinite;
}
.load-text {
    padding-top: 15px;
    text-align: center;
    font: 14pt "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: white;
}

HTML

CSS3 Elastic Ring

css3, circle

编辑器支持Emmet

快捷键

CSS3 Elastic Ring

css3, circle

CSS3 8个简单的加载动效

CSS3 多个不同颜色位置重叠的圆圈错位旋转加载动效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：