CSS3实现大小不一的粒子旋转加载动画
2021-05-08 21:13:36 先看看效果图，像是气泡在上升：
CSS Code复制内容到剪贴板
#load3,#loader3{font-size:20px;margin:80px50px;float:left;width:1em;height:1em;border-radius:50%;position:relative;text-indent:-9999em;-webkit-animation:load31.3sinfinitelinear;animation:load31.3sinfinitelinear;}@-webkit-keyframesload3{0%,100%{box-shadow:0em-3em00.2em#aaff00,2em-2em00em#aaff00,3em00-0.5em#aaff00,2em2em0-0.5em#aaff00,0em3em0-0.5em#aaff00,-2em2em0-0.5em#aaff00,-3em00-0.5em#aaff00,-2em-2em00em#aaff00;}12.5%{box-shadow:0-3em00#aaff00,2em-2em00.2em#aaff00,3em000#aaff00,2em2em0-0.5em#aaff00,03em0-0.5em#aaff00,-2em2em0-0.5em#aaff00,-3em00-0.5em#aaff00,-2em-2em0-0.5em#aaff00;}25%{box-shadow:0-3em0-0.5em#aaff00,2em-2em00em#aaff00,3em000.2em#aaff00,2em2em00#aaff00,03em0-0.5em#aaff00,-2em2em0-0.5em#aaff00,-3em00-0.5em#aaff00,-2em-2em0-0.5em#aaff00;}37.5%{box-shadow:0-3em0-0.5em#aaff00,2em-2em0-0.5em#aaff00,3em000#aaff00,2em2em00.2em#aaff00,03em00#aaff00,-2em2em0-0.5em#aaff00,-3em00-0.5em#aaff00,-2em-2em0-0.5em#aaff00;}50%{box-shadow:0-3em0-0.5em#aaff00,2em-2em0-0.5em#aaff00,3em00-0.5em#aaff00,2em2em00#aaff00,03em00.2em#aaff00,-2em2em00#aaff00,-3em00-0.5em#aaff00,-2em-2em0-0.5em#aaff00;}62.5%{box-shadow:0-3em0-0.5em#aaff00,2em-2em0-0.5em#aaff00,3em00-0.5em#aaff00,2em2em0-0.5em#aaff00,03em00#aaff00,-2em2em00.2em#aaff00,-3em000#aaff00,-2em-2em0-0.5em#aaff00;}75%{box-shadow:0-3em0-0.5em#aaff00,2em-2em0-0.5em#aaff00,3em00-0.5em#aaff00,2em2em0-0.5em#aaff00,03em0-0.5em#aaff00,-2em2em00#aaff00,-3em000.2em#aaff00,-2em-2em00#aaff00;}87.5%{box-shadow:0-3em00#aaff00,2em-2em0-0.5em#aaff00,3em00-0.5em#aaff00,2em2em0-0.5em#aaff00,03em0-0.5em#aaff00,-2em2em00#aaff00,-3em000#aaff00,-2em-2em00.2em#aaff00;}}@keyframesload3{0%,100%{box-shadow:0-3em00.2em#aaff00,2em-2em00#aaff00,3em00-0.5em#aaff00,2em2em0-0.5em#aaff00,03em0-0.5em#aaff00,-2em2em0-0.5em#aaff00,-3em00-0.5em#aaff00,-2em-2em00#aaff00;}12.5%{box-shadow:0-3em00#aaff00,2em-2em00.2em#aaff00,3em000#aaff00,2em2em0-0.5em#aaff00,03em0-0.5em#aaff00,-2em2em0-0.5em#aaff00,-3em00-0.5em#aaff00,-2em-2em0-0.5em#aaff00;}25%{box-shadow:0-3em0-0.5em#aaff00,2em-2em00#aaff00,3em000.2em#aaff00,2em2em00#aaff00,03em0-0.5em#aaff00,-2em2em0-0.5em#aaff00,-3em00-0.5em#aaff00,-2em-2em0-0.5em#aaff00;}37.5%{box-shadow:0-3em0-0.5em#aaff00,2em-2em0-0.5em#aaff00,3em000#aaff00,2em2em00.2em#aaff00,03em00#aaff00,-2em2em0-0.5em#aaff00,-3em00-0.5em#aaff00,-2em-2em0-0.5em#aaff00;}50%{box-shadow:0-3em0-0.5em#aaff00,2em-2em0-0.5em#aaff00,3em00-0.5em#aaff00,2em2em00#aaff00,03em00.2em#aaff00,-2em2em00#aaff00,-3em00-0.5em#aaff00,-2em-2em0-0.5em#aaff00;}62.5%{box-shadow:0-3em0-0.5em#aaff00,2em-2em0-0.5em#aaff00,3em00-0.5em#aaff00,2em2em0-0.5em#aaff00,03em00#aaff00,-2em2em00.2em#aaff00,-3em000#aaff00,-2em-2em0-0.5em#aaff00;}75%{box-shadow:0-3em0-0.5em#aaff00,2em-2em0-0.5em#aaff00,3em00-0.5em#aaff00,2em2em0-0.5em#aaff00,03em0-0.5em#aaff00,-2em2em00#aaff00,-3em000.2em#aaff00,-2em-2em00#aaff00;}87.5%{box-shadow:0-3em00#aaff00,2em-2em0-0.5em#aaff00,3em00-0.5em#aaff00,2em2em0-0.5em#aaff00,03em0-0.5em#aaff00,-2em2em00#aaff00,-3em000#aaff00,-2em-2em00.2em#aaff00;}}以上就是本文的全部内容，希望对大家学习CSS加载动画教程有所帮助。
声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。 如涉及版权问题，请提交至online#300.cn邮箱联系删除。
网站建设 IT知识 IT知识教程 CSS3实现大小不一的粒子旋转加载动画 
最新文章
热门文章
猜你喜欢
