css3旋 circle

CSS3的旋转效果让页面展示更加生动有趣，其中旋转圆圈效果是一种比较常见的效果。在css中我们可以使用transform来实现旋转圆圈的效果。

.circle {
    width: 100px;
    height: 100px;
    background-color: #f00;
    border-radius: 50%;
    -webkit-animation: circle-rotate 2s infinite linear;
    animation: circle-rotate 2s infinite linear;
}
@-webkit-keyframes circle-rotate {
from {
     -webkit-transform: rotate(0deg);
 }
to {
     -webkit-transform: rotate(360deg);
 }
}
@keyframes circle-rotate {
from {
     transform: rotate(0deg);
 }
to {
     transform: rotate(360deg);
 }
}
    

上述代码中，我们首先创建了一个名为circle的class，它代表了一个宽高为100像素、背景颜色为红色的圆圈。然后我们在该class中使用了动画效果，即circle-rotate。

这是一个无限循环的线性动画，运行时间为2秒。具体动画样式是从0度开始旋转，一直旋转到360度。在样式中，我们使用了-webkit-前缀，以确保Webkit内核的浏览器（如Chrome和Safari）可以正确地渲染动画。

最后，我们需要在html文件中加入该class，即可让这个圆圈动起来了！

div class="circle">
    /div>
    

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！