CSS3 齿轮啮合联动动画

Conical Gradient Cogs 旋转动画使用了CSS3变换，齿轮使用了SVG图片。

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    background: radial-gradient(circle, #333, #111);
    overflow: hidden;
}
.cog {
    position: absolute;
    width: 200px;
    height: 200px;
    top: 50%;
    left: 50%;
    border-radius: 200px;
    margin: -100px 0 0 -230px;
    background-image: radial-gradient(#666 60%, rgba(0, 0, 0, 0) 61%), repeating-conic-gradient(#666 0 15deg, transparent 0 30deg);
    animation-name: rotate;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
.cog:before {
    content: "";
    position: absolute;
    width: 50%;
    height: 50%;
    top: 25%;
    left: 25%;
    border-radius: 400px;
    background-image: radial-gradient(#2e2e2e 20%, #666 21%, #666 30%, rgba(0, 0, 0, 0) 31%), repeating-conic-gradient(#2e2e2e 0 45deg, transparent 0 90deg);
}
@keyframes rotate {
    from {
        transform: rotate(0);
    }
    to {
        transform: rotate(360deg);
    }
}
.cog-2,
.cog-3 {
    animation-direction: reverse;
    width: 100px;
    height: 100px;
    margin: 20px 0 0 -58px;
    animation-duration: 3s;
    background-image: radial-gradient(#666 50%, rgba(0, 0, 0, 0) 51%), repeating-conic-gradient(#666 0 30deg, transparent 0 60deg);
}
.cog-3 {
    animation-direction: normal;
    margin: -23px 0 0 20px;
}
.cog-bg1 {
    animation-direction: reverse;
    width: 300px;
    height: 300px;
    margin: -150px 0 0 -200px;
    animation-duration: 9s;
    background-image: radial-gradient(#252525 65%, rgba(0, 0, 0, 0) 65%), repeating-conic-gradient(#252525 0 10deg, transparent 0 20deg);
}
.cog-bg1:before {
    width: 70%;
    height: 70%;
    top: 15%;
    left: 15%;
    background-image: radial-gradient(#333 20%, #252525 21%, #252525 30%, rgba(0, 0, 0, 0) 31%), repeating-conic-gradient(#333 0 45deg, transparent 0 90deg);
}

HTML

Conical Gradient Cogs 旋转动画使用了CSS3变换，齿轮使用了SVG图片。

编辑器支持Emmet

快捷键

Conical Gradient Cogs 旋转动画使用了CSS3变换，齿轮使用了SVG图片。

CSS3 带阴影效果的正方体齿轮动画

CSS3 嵌套的正方形动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：