CSS3仿Android弹性圈更新动画

Android Nougat update animation 几个不同步的圆圈变形叠加而形成的口香糖/橡皮筋效果。

CSS3, circle

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body,
html {
    background-color: black;
}
.circles {
    background-size: cover;
    height: 290px;
    width: 290px;
    position: absolute;
    margin: 0 auto;
    top: 50%;
    left: 50%;
    -webkit-transform: translate3D(-50%, -50%, 0);
    transform: translate3D(-50%, -50%, 0);
}
.circle {
    box-sizing: border-box;
    position: absolute;
    width: 100%;
    height: 102.5%;
    border: 14px solid transparent;
    border-radius: 115% 140% 145% 110%/125% 140% 110% 125%;
    mix-blend-mode: screen;
}
.circle:nth-child(1) {
    border-color: #DB4437;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animation: spin1 8s linear infinite;
    animation: spin1 8s linear infinite;
}
.circle:nth-child(2) {
    border-color: #F4B400;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animation: spin2 8s linear infinite;
    animation: spin2 8s linear infinite;
}
.circle:nth-child(3) {
    border-color: #4285F4;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animation: spin3 8s linear infinite;
    animation: spin3 8s linear infinite;
}
.circle:nth-child(4) {
    border-color: #0F9D58;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animation: spin4 8s linear infinite;
    animation: spin4 8s linear infinite;
}
@-webkit-keyframes spin1 {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes spin1 {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@-webkit-keyframes spin2 {
    0% {
        -webkit-transform: rotate(72deg);
        transform: rotate(72deg);
    }
    100% {
        -webkit-transform: rotate(-288deg);
        transform: rotate(-288deg);
    }
}
@keyframes spin2 {
    0% {
        -webkit-transform: rotate(72deg);
        transform: rotate(72deg);
    }
    100% {
        -webkit-transform: rotate(-288deg);
        transform: rotate(-288deg);
    }
}
@-webkit-keyframes spin3 {
    0% {
        -webkit-transform: rotate(-144deg);
        transform: rotate(-144deg);
    }
    100% {
        -webkit-transform: rotate(216deg);
        transform: rotate(216deg);
    }
}
@keyframes spin3 {
    0% {
        -webkit-transform: rotate(-144deg);
        transform: rotate(-144deg);
    }
    100% {
        -webkit-transform: rotate(216deg);
        transform: rotate(216deg);
    }
}
@-webkit-keyframes spin4 {
    0% {
        -webkit-transform: rotate(216deg);
        transform: rotate(216deg);
    }
    100% {
        -webkit-transform: rotate(-144deg);
        transform: rotate(-144deg);
    }
}
@keyframes spin4 {
    0% {
        -webkit-transform: rotate(216deg);
        transform: rotate(216deg);
    }
    100% {
        -webkit-transform: rotate(-144deg);
        transform: rotate(-144deg);
    }
}

HTML

Android Nougat update animation 几个不同步的圆圈变形叠加而形成的口香糖/橡皮筋效果。

CSS3, circle

编辑器支持Emmet

快捷键

Android Nougat update animation 几个不同步的圆圈变形叠加而形成的口香糖/橡皮筋效果。

CSS3, circle

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

6个使用CSS3 transform-origin属性实现的方形翻转动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：