css3转圈等待 |css 上下翻转动画

.loading {
margin: 50px auto;
width: 50px;
height: 50px;
border-radius: 50%;
border: 5px solid #eee;
border-top: 5px solid #07d;
animation: spin 1s linear infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}

首先，大家需要设置一个包含转圈的元素，可以用div标签来实现。在样式中，大家需要依次设置宽度、高度、圆角半径、边框宽度等等，来实现一个圆圈的效果。其中，需要注意将边框设置为透明，只设置上部分为需要显示的颜色。

最后，在大家的样式中加上动画效果，使用CSS3的@keyframes关键字来设置循环次数和转圈开始、结束的角度即可。最终效果就是一个神奇的转圈等待效果。