CSS3实现大小不一的粒子旋转加载动画

先看看效果图，像是气泡在上升：

CSS Code复制内容到剪贴板 #load3, #loader3 { font-size: 20px; margin: 80px 50px; float: left; width: 1em; height: 1em; border-radius: 50%; position: relative; text-indent: -9999em; -webkit-animation: load3 1.3s infinite linear; animation: load3 1.3s infinite linear; } @-webkit-keyframes load3 { 0%, 100% { box-shadow: 0em -3em 0 0.2em #aaff00, 2em -2em 0 0em #aaff00, 3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00, 0em 3em 0 -0.5em #aaff00, -2em 2em 0 -0.5em #aaff00, -3em 0 0 -0.5em #aaff00, -2em -2em 0 0em #aaff00; } 12.5% { box-shadow: 0 -3em 0 0 #aaff00, 2em -2em 0 0.2em #aaff00, 3em 0 0 0 #aaff00, 2em 2em 0 -0.5em #aaff00, 0 3em 0 -0.5em #aaff00, -2em 2em 0 -0.5em #aaff00, -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00; } 25% { box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 0em #aaff00, 3em 0 0 0.2em #aaff00, 2em 2em 0 0 #aaff00, 0 3em 0 -0.5em #aaff00, -2em 2em 0 -0.5em #aaff00, -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00; } 37.5% { box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00, 3em 0 0 0 #aaff00, 2em 2em 0 0.2em #aaff00, 0 3em 0 0 #aaff00, -2em 2em 0 -0.5em #aaff00, -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00; } 50% { box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00, 3em 0 0 -0.5em #aaff00, 2em 2em 0 0 #aaff00, 0 3em 0 0.2em #aaff00, -2em 2em 0 0 #aaff00, -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00; } 62.5% { box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00, 3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00, 0 3em 0 0 #aaff00, -2em 2em 0 0.2em #aaff00, -3em 0 0 0 #aaff00, -2em -2em 0 -0.5em #aaff00; } 75% { box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00, 3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00, 0 3em 0 -0.5em #aaff00, -2em 2em 0 0 #aaff00, -3em 0 0 0.2em #aaff00, -2em -2em 0 0 #aaff00; } 87.5% { box-shadow: 0 -3em 0 0 #aaff00, 2em -2em 0 -0.5em #aaff00, 3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00, 0 3em 0 -0.5em #aaff00, -2em 2em 0 0 #aaff00, -3em 0 0 0 #aaff00, -2em -2em 0 0.2em #aaff00; } } @keyframes load3 { 0%, 100% { box-shadow: 0 -3em 0 0.2em #aaff00, 2em -2em 0 0 #aaff00, 3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00, 0 3em 0 -0.5em #aaff00, -2em 2em 0 -0.5em #aaff00, -3em 0 0 -0.5em #aaff00, -2em -2em 0 0 #aaff00; } 12.5% { box-shadow: 0 -3em 0 0 #aaff00, 2em -2em 0 0.2em #aaff00, 3em 0 0 0 #aaff00, 2em 2em 0 -0.5em #aaff00, 0 3em 0 -0.5em #aaff00, -2em 2em 0 -0.5em #aaff00, -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00; } 25% { box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 0 #aaff00, 3em 0 0 0.2em #aaff00, 2em 2em 0 0 #aaff00, 0 3em 0 -0.5em #aaff00, -2em 2em 0 -0.5em #aaff00, -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00; } 37.5% { box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00, 3em 0 0 0 #aaff00, 2em 2em 0 0.2em #aaff00, 0 3em 0 0 #aaff00, -2em 2em 0 -0.5em #aaff00, -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00; } 50% { box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00, 3em 0 0 -0.5em #aaff00, 2em 2em 0 0 #aaff00, 0 3em 0 0.2em #aaff00, -2em 2em 0 0 #aaff00, -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00; } 62.5% { box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00, 3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00, 0 3em 0 0 #aaff00, -2em 2em 0 0.2em #aaff00, -3em 0 0 0 #aaff00, -2em -2em 0 -0.5em #aaff00; } 75% { box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00, 3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00, 0 3em 0 -0.5em #aaff00, -2em 2em 0 0 #aaff00, -3em 0 0 0.2em #aaff00, -2em -2em 0 0 #aaff00; } 87.5% { box-shadow: 0 -3em 0 0 #aaff00, 2em -2em 0 -0.5em #aaff00, 3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00, 0 3em 0 -0.5em #aaff00, -2em 2em 0 0 #aaff00, -3em 0 0 0 #aaff00, -2em -2em 0 0.2em #aaff00; } }

以上就是本文的全部内容，希望对大家学习CSS加载动画教程有所帮助。

CSS3实现大小不一的粒子旋转加载动画