html5宝石旋转动画
时间: 2023-10-16 13:10:39 浏览: 33
HTML5宝石旋转动画可以通过CSS3中的transform属性来实现。以下是一个简单的示例代码:
HTML:
```
<div class="gem"></div>
```
CSS:
```
.gem {
width: 100px;
height: 100px;
background: #ff69b4;
border-radius: 50%;
position: relative;
animation: rotate 5s linear infinite;
}
.gem:before, .gem:after {
content: "";
width: 50px;
height: 50px;
background: #fff;
border-radius: 50%;
position: absolute;
top: 25px;
left: 25px;
}
.gem:before {
transform: translate(-75px);
}
.gem:after {
transform: translate(75px);
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
```
在这个示例中,我们创建了一个圆形的宝石,并使用伪元素创建了两个白色的圆形,作为宝石的上下两端。然后,我们使用CSS3的transform属性将宝石和伪元素进行旋转,并使用animation属性将旋转动画应用于宝石元素。