先看看效果图，像是气泡在上升：
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加载动画教程有所帮助。
【CSS3实现大小不一的粒子旋转加载动画】相关文章：