CSS实现让星星绕着太阳一直旋转的动画代码
时间: 2023-10-26 21:16:45 浏览: 49
可以使用CSS3的animation和transform属性来实现星星绕着太阳旋转的动画。以下是示例代码:
HTML代码:
```html
<div class="sun">
<div class="star"></div>
</div>
```
CSS代码:
```css
.sun {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
background-color: yellow;
animation: spin 10s linear infinite;
}
.star {
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: white;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
```
在上面的代码中,我们使用了两个div元素,一个表示太阳,一个表示星星。太阳使用了border-radius属性将其变成圆形,并使用animation属性和keyframes来实现旋转动画。星星使用了position:absolute属性,使其相对于太阳进行绝对定位,并使用transform属性使其居中。