先看看效果图，像是气泡在上升：
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加载动画教程有所帮助。
