CSS3 三段光圈Loading动效

通过CSS3动画属性实现的LOADING效果

CSS3, 界面组件

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    background-color: #1f3a47;
    height: 100%;
}
.l_c {
    max-width: 200px;
    min-width: 100px;
    max-height: 200px;
    min-height: 100px;
    margin: auto;
    margin-top: 15%;
    display: table;
    width: 100%;
    height: 100%;
    position: relative;
}
.l_c div {
    width: 100%;
    height: 100%;
    border: 5px solid transparent;
    border-top: 0;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 49%;
    /*,#f0db75*/
}
.l_c .l_g {
    border-color: rgba(204, 204, 204, 0.31);
    z-index: 1;
}
.l_c .l_b {
    -webkit-animation: blueSpin 1s infinite ease;
    /* Chrome, Safari, Opera */
    
    animation: blueSpin 1s infinite ease;
    z-index: 2;
}
.l_c .l_y {
    -webkit-animation: yellowSpin 1s 0.25s infinite ease;
    /* Chrome, Safari, Opera */
    
    animation: yellowSpin 1s 0.25s infinite ease;
    z-index: 3;
}
@keyframes blueSpin {
    0% {
        border-color: transparent;
        border-right-color: #66e6ff;
    }
    50% {
        border-color: transparent;
        border-bottom-color: #66e6ff;
    }
    100% {
        border-color: transparent;
        border-left-color: #66e6ff;
    }
}
@keyframes yellowSpin {
    0% {
        border-color: transparent;
        border-right-color: #f0db75;
    }
    50% {
        border-color: transparent;
        border-bottom-color: #f0db75;
    }
    100% {
        border-color: transparent;
        border-left-color: #f0db75;
    }
}

HTML

通过CSS3动画属性实现的LOADING效果

CSS3, 界面组件

编辑器支持Emmet

快捷键

通过CSS3动画属性实现的LOADING效果

CSS3, 界面组件

CSS3 植物生长型Loading动效

CSS3 果冻压缩翻滚的Loading动效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：