在我们日常写前端页面时,会遇到写加载状态的需求。有时会选择用转圈的效果来表示加载状态,今天小编给大家介绍下如何使用css3实现转圈效果。
打开编辑器,在编辑器里新建一个study.html页面,用来讲解今天的内容
2.在body区域内新建一个div,class名称为test,
3.在style标签内给test设置宽、高、圆角和边框(宽度和高度须保持同样大小)
4.写一个名为load的旋转动画,并把动画加到test的样式中(时间设置得越长,旋转速度越慢)
5.在浏览器中打开study.html页面,会发现一直在转圈
6.注意点:
transform:transform属性向元素应用2D或3D转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
animationanimation属性是一个简写属性,用于设置六个动画属性