html同心圆旋转动画
时间: 2023-11-15 19:56:51 浏览: 158
可以使用CSS3的动画来实现同心圆旋转动画。具体实现步骤如下:
1. 创建一个div容器,设置宽高和背景颜色,作为同心圆的容器。
2. 在容器中创建多个div元素,每个div元素的宽高和位置都不同,通过设置border-radius属性来实现同心圆的效果。
3. 使用CSS3的@keyframes规则定义旋转动画,设置transform: rotate()属性来实现旋转效果。
4. 将动画应用到容器上,使用animation属性来设置动画名称、持续时间、动画速度等参数。
以下是示例代码:
HTML代码:
```
<div class="circle-container">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
```
CSS代码:
```
.circle-container {
width: 200px;
height: 200px;
background-color: #ccc;
position: relative;
}
.circle1 {
width: 50px;
height: 50px;
border-radius: 50%;
position: absolute;
top: 25px;
left: 25px;
}
.circle2 {
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
top: 50px;
left: 50px;
}
.circle3 {
width: 150px;
height: 150px;
border-radius: 50%;
position: absolute;
top: 75px;
left: 75px;
}
.circle4 {
width: 200px;
height: 200px;
border-radius: 50%;
position: absolute;
top: 100px;
left: 100px;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.circle-container {
animation-name: rotate;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
```
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)