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

CSS Code 复制内容到剪贴板 #load3,      #loader 3 {        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加载动画教程有所帮助。