使用CSS3动画功能制作出引人入胜的加载动画

时间：2023-03-31 13:44:57 CSS

用到的主要知识点：参考菜鸟教程：http://www.runoob.com/css3/cs...frameanimation/动画延时flex实现HTML

解释：loading-1/2/3/4用来区分四个不同的点，将通用样式的CSS放在loading-item中了解少的可以看这个more更清晰，不懂的看生成的cssLESS@red:#FF3B30;@orange:#FF9500;@black:#373737;@green:#4CD964;@load-box-height:50px;.loading{高度：@load-box-height;//设置容器的高度，否则会上下浮动margin:20px0;显示：弹性；对齐项目：居中；//水平排列子元素justify-content:center;//垂直排列Childelement.loading-item{height:@load-box-height;宽度：10px；右边距：10px；&:last-child{//去掉最后一个的右边距margin-right:0;}}&-1{//【参数分别为】动画关键点名称，一个动画持续时间，循环方式，过滤规则，动画开始延迟时间-webkit-animation:load-frame1sinfinitelinear0s;-o-animation:load-frame1sinfinitelinear0s;动画：加载帧1s无限线性0s；背景色：@red；}&-2{-webkit-animation:load-frame1sinfinitelinear0.25s;//通过控制Delay，只有一个关键帧可以制作渐变效果-o-animation:load-frame1sinfinitelinear0.25s;动画：load-frame1sinfinitelinear0.25s;背景色：@orange；}&-3{-webkit-animation:load-frame1sinfinitelinear0.5s;-o-animation:load-frame1sinfinitelinear0.5s;动画：load-frame1sinfinitelinear0.5s;背景颜色：@black；{-webkit-animation:load-frame1sinfinitelinear0.75s;-o-animation:load-frame1sinfinitelinear0.75s;动画：load-frame1sinfinitelinear0.75s;背景颜色：@green；}}@keyframesload-frame{0%{height:@load-box-height;}50%{height:@load-box-height*0.25;}//设置动画中间的高度，即此时最低，为原始高度25%100%{height:@load-box-height;}}@-webkit-keyframesload-frame{//safari&chrome0%{height:@load-box-height;}50%{height:@load-box-height*0.25;}100%{height:@load-box-height;}}CSS。loading{高度：50px;边距：20px0；显示：弹性；对齐项目：居中；调整内容：居中；}.loading.loading-item{height:50px;宽度：10px；margin-right:10px;}.loading.loading-item:last-child{margin-right:0;}.loading-1{-webkit-animation:load-frame1s无限线性0s;-o-animation:load-frame1sinfinitelinear0s;动画：加载帧1s无限线性0s；背景色：#FF3B30；}.loading-2{-webkit-animation：加载帧1s无限线性0.25s；-o-animation:load-frame1sinfinitelinear0.25s;动画：load-frame1sinfinitelinear0.25s;背景色：#FF9500；}.loading-3{-webkit-animation：加载帧1s无限线性0.5s；-o-animation:load-frame1sinfinitelinear0.5s;动画：load-frame1sinfinitelinear0.5s;背景色：#373737;}.loading-4{-webkit-animation:load-frame1sinfinitelinear0.75s;-o-animation:load-frame1sinfinitelinear0.75s;动画：load-frame1sinfinitelinear0.75s;背景颜色：#4CD964;}@keyframes加载框架{0%{height:50px;}50%{height:12.5px;}100%{height:50px;}}@-webkit-keyframes加载框架{0%{height:50px;}50%{height:12.5px;}100%{height:50px;}}最后，WA-LA，完成

上一篇：解决CSS3多栏样式column-width布局，内容被截断乱序

下一篇：好的程序员web前端培训分享为什么那么多人用vue.js

使用CSS3动画功能制作出引人入胜的加载动画相关文章