css帧动画旋转加载 |css清除浮动的方法

.spinner {
border: 10px solid #f3f3f3; 
border-top: 10px solid #3498db; 
border-radius: 50%; 
width: 50px; 
height: 50px; 
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

首先，大家需要创建一个容器来容纳大家的加载动画。 大家可以使用一个 div 元素并给它一个类名 “spinner”。

然后，大家需要为大家的“spinner”容器定义样式。 大家想要一个圆形容器，因此大家需要给它一个宽度和高度，并添加一个边框。 大家还需要在 CSS 中定义一个边框底部的颜色，这样大家的加载动画看起来就像在旋转。

接下来，大家将使用 CSS 规则 @keyframes 定义一个名为“spin”的动画。 大家可以使用“transform：rotate（）”属性在 z 轴上旋转容器，并设置它在2秒内从0度旋转到360度。

最后，大家将使用“animation”属性将大家的动画应用于大家的“spinner”容器。 大家将动画名称设置为“spin”，将其持续时间设置为2秒，并将其设置为“无限循环”。

在完成这些步骤后，大家就创建了一个简单而又酷炫的帧动画旋转加载。它可以让用户在等待内容加载时感到更加有趣和好玩。