运用CSS动画做成齿轮转动的效果
时间: 2023-05-29 20:06:29 浏览: 172
下面是一个简单的示例代码,可以实现齿轮的旋转效果:
HTML代码:
```
<div class="gear-container">
<div class="gear-1"></div>
<div class="gear-2"></div>
<div class="gear-3"></div>
</div>
```
CSS代码:
```
.gear-container {
position: relative;
width: 300px;
height: 300px;
}
.gear-1, .gear-2, .gear-3 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #333;
border-radius: 50%;
animation: rotate 3s linear infinite;
}
.gear-1 {
width: 100px;
height: 100px;
animation-duration: 4s;
}
.gear-2 {
width: 150px;
height: 150px;
animation-duration: 6s;
}
.gear-3 {
width: 200px;
height: 200px;
animation-duration: 8s;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
```
解释:
1. 首先创建一个容器,设置其宽高为300px,并设置为相对定位。
2. 在容器中创建三个齿轮,分别为gear-1、gear-2、gear-3,并设置其为绝对定位。
3. 将三个齿轮都居中显示,并通过translate方法使其垂直和水平方向上都居中显示。
4. 设置齿轮的背景色为#333,边框为圆角。
5. 通过animation属性设置齿轮的旋转动画,其中rotate为自定义的动画名称,3s表示动画持续时间,linear表示动画速度为匀速,infinite表示动画无限循环。
6. 分别设置三个齿轮的大小和动画持续时间不同,使其呈现出倒金字塔形状。
7. 最后定义动画rotate的关键帧,从0%开始旋转0度,到100%结束旋转360度,实现齿轮的旋转效果。