CSS3很酷的彗星旋转加载动画

Comet rotating loader，模拟彗星，也可以用来模拟游走的蝌蚪。

css3, loader

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: black;
}
.loader {
    width: 20em;
    height: 20em;
    font-size: 10px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.loader .face {
    position: absolute;
    border-radius: 50%;
    border-style: solid;
    animation: animate 3s linear infinite;
}
.loader .face:nth-child(1) {
    width: 100%;
    height: 100%;
    color: gold;
    border-color: currentColor transparent transparent currentColor;
    border-width: 0.2em 0.2em 0em 0em;
    --deg: -45deg;
    animation-direction: normal;
}
.loader .face:nth-child(2) {
    width: 70%;
    height: 70%;
    color: lime;
    border-color: currentColor currentColor transparent transparent;
    border-width: 0.2em 0em 0em 0.2em;
    --deg: -135deg;
    animation-direction: reverse;
}
.loader .face .circle {
    position: absolute;
    width: 50%;
    height: 0.1em;
    top: 50%;
    left: 50%;
    background-color: transparent;
    transform: rotate(var(--deg));
    transform-origin: left;
}
.loader .face .circle::before {
    position: absolute;
    top: -0.5em;
    right: -0.5em;
    content: '';
    width: 1em;
    height: 1em;
    background-color: currentColor;
    border-radius: 50%;
    box-shadow: 0 0 2em, 0 0 4em, 0 0 6em, 0 0 8em, 0 0 10em, 0 0 0 0.5em rgba(255, 255, 0, 0.1);
}
@keyframes animate {
    to {
        transform: rotate(1turn);
    }
}

HTML

Comet rotating loader，模拟彗星，也可以用来模拟游走的蝌蚪。

css3, loader

编辑器支持Emmet

快捷键

Comet rotating loader，模拟彗星，也可以用来模拟游走的蝌蚪。

css3, loader

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

5个纯CSS制作的旋转加载动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：