CSS动画做成齿轮转动效果

CSS动画可以帮助我们实现各种炫酷的效果，其中齿轮转动效果是一种非常常见的动画效果。对于初学者来说，了解如何实现这种效果是非常重要的。

在实现齿轮转动效果时，我们可以使用CSS3中的transform属性和animation属性。transform属性用于旋转图像，而animation属性，则是用于制作动画。

.gear {
    background: #fff;
    border-radius: 50%;
    box-shadow: inset 0px 0px 20px rgba(0, 0, 0, 0.1),0px 0px 20px rgba(0, 0, 0, 0.1);
    height: 100px;
    position: absolute;
    width: 100px;
}
.gear-inner {
    background: #444;
    border-radius: 50%;
    height: 60px;
    margin: calc(20px / 2);
    width: 60px;
}
.gear-outer {
    animation: rotate 3s infinite linear;
    height: 100px;
    left: 0;
    position: absolute;
    top: 0;
    transform-origin: 50% 50%;
    width: 100px;
}
@keyframes rotate {
to {
    transform: rotate(360deg);
}
}
    

以上代码中，我们首先定义了一个类名为gear的样式，用于定义齿轮的样式，包括背景、边框、大小和位置等元素。

然后定义了类名为gear-inner的样式，用于定义齿轮中心的样式，包括背景色、大小和位置等元素。

最后，我们定义了类名为gear-outer的样式，使用animation属性制作动画。在这个样式中，我们设置了动画名称为rotate，持续时间为3秒，重复次数为无限，以线性方式进行动画。另外，我们还设置了齿轮的旋转中心为50% 50%，也就是齿轮的中心位置。在@keyframes中，我们定义了从0度到360度的动画，实现转动效果。

综上，通过使用CSS3中的transform属性和animation属性，我们可以轻松地实现齿轮转动效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！