css3旋 circle |css上传文件代码

css不用学，css图间距代码，css新特性之scroll，css3 font属性，css将图片放到所需位置，环形加载中css3，css上传文件代码 css3旋 circle |css上传文件代码

.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>