CSS动画可以帮助我们实现各种炫酷的效果,其中齿轮转动效果是一种非常常见的动画效果。对于初学者来说,了解如何实现这种效果是非常重要的。
在实现齿轮转动效果时,我们可以使用CSS3中的transform属性和animation属性。transform属性用于旋转图像,而animation属性,则是用于制作动画。
.gear { background: #fff; border-radius: 50%; Box-shadow: inset 0px 0px 20px rgba(0,0.1),0px 0px 20px rgba(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度的动画,实现转动效果。