简单加载器——分步指南

HTML

对于 HTML，我们将只有一个带有“loader”类的 div 元素。

 <div class="loader"></div>

CSS

我们只需根据需要设置宽度和高度，边框半径为 50%。然后添加 10px 的实心边框。使用边框颜色属性，我们将顶部和底部颜色设置为 #000（黑色），左右设置到透明。

 .loader {  
 宽度：3rem；  
 高度：3rem；  
 边界半径：50%；  
 边框：10px 实心#000；  
 边框颜色：#000 透明；  
 }

现在我们将创建一个名为“旋转”的动画。我们只需将变换属性设置为在 0% 上旋转 0 度，在 100% 上旋转 360 度。

 @keyframes 旋转 {  
 0% {  
 变换：旋转（0度）；  
 }  
 100% {  
 变换：旋转（360度）；  
 }  
 }

现在只需在 loader 元素上添加动画属性。我们将设置持续时间为 1 秒，无限和线性。

 .loader {  
 宽度：3rem；  
 高度：3rem；  
 边界半径：50%；  
 边框：10px 实心#000；  
 border-color: #000 透明 #000 透明;  
 动画：旋转1s线性无限；<!--  Animation  -->  
 }

视频教程

您可以通过视频教程找到整个代码 这里 .

感谢您阅读本文。 ❤️

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/11776/02200317