css3圆圈转动动画

CSS3 是网页设计和开发中必不可少的技术之一，它可以帮助我们实现各种炫酷的效果，如圆圈转动动画。此效果运用 CSS3 的动画过渡和旋转等属性，在网页上呈现出一个 3D 圆形转动的效果，非常吸引眼球，下面介绍一下如何实现这个效果。

.circle {
    width: 60px;
    height: 60px;
    border-radius: 50%; /*设置圆角为50%实现圆形*/
    border: 6px solid #ccc; /*设置边框及颜色*/
    border-top-color: #f44336; /*设置顶部边框颜色*/
    animation: spin 2s linear infinite; /*使用 animation 属性设置动画效果*/
}

@keyframes spin { /*设置动画变化效果*/
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

代码中我们给圆形设置了宽高，以及圆角为 50%，边框颜色为 #ccc，顶部边框颜色为 #f44336， 这样圆形就变成了一个圆圈。接下来使用 animation 属性设置动画效果，其中包括动画名称 spin、 时间 2s 、线性变化效果，以及无限循环；最后通过 @keyframes 设置动画变化效果，其中 from 和 to 分别代表动画开始和结束的状态，通过 transform 属性完成旋转的动画效果，设置为 rotate(0deg) 和 rotate(360deg) 分别代表旋转的角度，这样就完成了圆圈转动的动画效果。