CSS3 绕圈旋转动画

Spinning rings (motion/offset path)

CSS3

《three.js GLTF Animation Blending（分离的动画文件）》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

.r {
    color: red
}
.g {
    color: forestgreen
}
.b {
    color: dodgerblue
}
body {
    background: #222;
    display: flex;
    --spin-dur: 2s;
    height: 100vh;
    margin: 0;
}
svg {
    height: 90vmin;
    width: 90vmin;
    margin: auto;
    display: block;
    overflow: visible;
}
.dot {
    fill: currentColor;
    stroke: none;
    motion-path: path( "M-45,0 A45,45 0 0 0 45,0 A45,45 0 0 0 -45,0");
    offset-path: circle(45px);
    motion-offset: calc(10% * var(--i));
    offset-distance: calc(10% * var(--i));
}
.loop {
    stroke: currentColor;
    stroke-width: 0.5px;
    fill: none;
}
.ring {
    motion-path: path( "M-8,0 A8,8 0 0 0 8,0 A8,8 0 0 0 -8,0");
    offset-path: circle(8px);
    motion-rotation: 0deg;
    offset-rotation: 0deg;
    animation: fade calc(var(--spin-dur) * 1.8) infinite alternate cubic-bezier(1, 0, 0.5, 0.5) both, spin var(--spin-dur) infinite linear;
}
@keyframes fade {
    from {
        stroke-opacity: 0;
    }
}
@keyframes spin {
    to {
        motion-offset: 100%;
        offset-distance: 100%;
    }
}
.ring:nth-of-type(1) {
    animation-delay: var(--spin-dur), calc(-1 * var(--spin-dur)/3);
}
.ring:nth-of-type(2) {
    animation-delay: var(--spin-dur), calc(-2 * var(--spin-dur)/3);
}
.ring:nth-of-type(3) {
    animation-delay: var(--spin-dur), 0s;
}

HTML

Spinning rings (motion/offset path)

CSS3

编辑器支持Emmet

快捷键

Spinning rings (motion/offset path)

CSS3

CSS3 外发光圆圈错觉式旋转动画

CSS3 沙滩上的一天（伞影子随时间旋转）动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：