CSS3实现粒子旋转伸缩加载动画
2021-05-08 21:13:37 本文运用CSS3的旋转Transform属性和动画的执行百分比制作而成，很特别的CSS3实现粒子旋转伸缩加载动画，具体内容如下
CSS Code复制内容到剪贴板
#loader6{margin:60px50px;float:left;font-size:90px;text-indent:-9999em;overflow:hidden;width:1em;height:1em;border-radius:50%;position:relative;-webkit-animation:load61.7sinfiniteease;animation:load61.7sinfiniteease;}@-webkit-keyframesload6{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);box-shadow:-0.11em-0.83em0-0.4em#ff0000,-0.11em-0.83em0-0.42em#ff0000,-0.11em-0.83em0-0.44em#ff0000,-0.11em-0.83em0-0.46em#ff0000,-0.11em-0.83em0-0.477em#ff0000;}5%,95%{box-shadow:-0.11em-0.83em0-0.4em#ff0000,-0.11em-0.83em0-0.42em#ff0000,-0.11em-0.83em0-0.44em#ff0000,-0.11em-0.83em0-0.46em#ff0000,-0.11em-0.83em0-0.477em#ff0000;}30%{box-shadow:-0.11em-0.83em0-0.4em#ff0000,-0.51em-0.66em0-0.42em#ff0000,-0.75em-0.36em0-0.44em#ff0000,-0.83em-0.03em0-0.46em#ff0000,-0.81em0.21em0-0.477em#ff0000;}55%{box-shadow:-0.11em-0.83em0-0.4em#ff0000,-0.29em-0.78em0-0.42em#ff0000,-0.43em-0.72em0-0.44em#ff0000,-0.52em-0.65em0-0.46em#ff0000,-0.57em-0.61em0-0.477em#ff0000;}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);box-shadow:-0.11em-0.83em0-0.4em#ff0000,-0.11em-0.83em0-0.42em#ff0000,-0.11em-0.83em0-0.44em#ff0000,-0.11em-0.83em0-0.46em#ff0000,-0.11em-0.83em0-0.477em#ff0000;}}@keyframesload6{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);box-shadow:-0.11em-0.83em0-0.4em#ff0000,-0.11em-0.83em0-0.42em#ff0000,-0.11em-0.83em0-0.44em#ff0000,-0.11em-0.83em0-0.46em#ff0000,-0.11em-0.83em0-0.477em#ff0000;}5%,95%{box-shadow:-0.11em-0.83em0-0.4em#ff0000,-0.11em-0.83em0-0.42em#ff0000,-0.11em-0.83em0-0.44em#ff0000,-0.11em-0.83em0-0.46em#ff0000,-0.11em-0.83em0-0.477em#ff0000;}30%{box-shadow:-0.11em-0.83em0-0.4em#ff0000,-0.51em-0.66em0-0.42em#ff0000,-0.75em-0.36em0-0.44em#ff0000,-0.83em-0.03em0-0.46em#ff0000,-0.81em0.21em0-0.477em#ff0000;}55%{box-shadow:-0.11em-0.83em0-0.4em#ff0000,-0.29em-0.78em0-0.42em#ff0000,-0.43em-0.72em0-0.44em#ff0000,-0.52em-0.65em0-0.46em#ff0000,-0.57em-0.61em0-0.477em#ff0000;}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);box-shadow:-0.11em-0.83em0-0.4em#ff0000,-0.11em-0.83em0-0.42em#ff0000,-0.11em-0.83em0-0.44em#ff0000,-0.11em-0.83em0-0.46em#ff0000,-0.11em-0.83em0-0.477em#ff0000;}}以上就是本文的全部内容，希望对大家学习CSS样式编写有所帮助，制作出更多精彩的加载动画效果。
声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。 如涉及版权问题，请提交至online#300.cn邮箱联系删除。
网站建设 IT知识 IT知识教程 CSS3实现粒子旋转伸缩加载动画 
最新文章
热门文章
猜你喜欢
