使用CSS3仿Android系统牛轧糖环加载动画

Android Nougat Loading Rings in CSS3

css3, ring

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    height: 100%;
    width: 100%;
    margin: 0px;
    position: absolute;
    background: black;
}
.container {
    margin: auto;
    width: 300px;
    height: 300px;
    position: relative;
    top: 45%;
    transform: translateY(-45%);
}
.ring {
    width: 300px;
    height: 300px;
    border-radius: 300px;
    position: absolute;
    mix-blend-mode: screen;
    background: transparent;
}
.red {
    border: 18px solid #d50f1c;
    animation: redanim linear 6s;
    animation-iteration-count: infinite;
}
.green {
    border: 18px solid #009927;
    animation: greenanim linear 6s;
    animation-iteration-count: infinite;
}
.blue {
    border: 18px solid #3569e1;
    animation: blueanim linear 6s;
    animation-iteration-count: infinite;
}
.yellow {
    border: 18px solid #edb40f;
    animation: yellowanim linear 6s;
    animation-iteration-count: infinite;
}
@keyframes redanim {
    0% {
        transform: rotate(0deg) scaleX(0.9) scaleY(1);
    }
    50% {
        transform: rotate(180deg) scaleX(0.9) scaleY(1);
    }
    100% {
        transform: rotate(360deg) scaleX(0.9) scaleY(1);
    }
}
@keyframes greenanim {
    0% {
        transform: rotate(31deg) scaleX(0.9) scaleY(1);
    }
    25% {
        transform: rotate(121deg) scaleX(1) scaleY(0.9);
    }
    50% {
        transform: rotate(211deg) scaleX(0.9) scaleY(1);
    }
    75% {
        transform: rotate(301deg) scaleX(1) scaleY(0.9);
    }
    100% {
        transform: rotate(391deg) scaleX(0.9) scaleY(1);
    }
}
@keyframes blueanim {
    0% {
        transform: rotate(413deg) scaleX(0.9) scaleY(1);
    }
    50% {
        transform: rotate(233deg) scaleX(0.9) scaleY(1);
    }
    100% {
        transform: rotate(53deg) scaleX(0.9) scaleY(1);
    }
}
@keyframes yellowanim {
    0% {
        transform: rotate(472deg) scaleX(0.9) scaleY(1);
    }
    25% {
        transform: rotate(382deg) scaleX(1) scaleY(0.9);
    }
    50% {
        transform: rotate(292deg) scaleX(0.9) scaleY(1);
    }
    75% {
        transform: rotate(202deg) scaleX(1) scaleY(0.9);
    }
    100% {
        transform: rotate(112deg) scaleX(0.9) scaleY(1);
    }
}

HTML

Android Nougat Loading Rings in CSS3

css3, ring

编辑器支持Emmet

快捷键

Android Nougat Loading Rings in CSS3

css3, ring

CSS3仿Android弹性圈更新动画

使用纯CSS模拟的Windows XP开机加载动画界面

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：