先看看效果图:

CSS Code复制内容到剪贴板 #loader1,      #loader1:before,      #loader1:after {         background#f2fa08;         -webkit-animation: load1 1s infinite ease-in-out;         animation: load1 1s infinite ease-in-out;         width: 1em;         height: 4em;       }       #loader1:before,       #loader1:after {         positionabsolute;         top: 0;         content;       }       #loader1:before {         left: -1.5em;       }       #loader1 {         text-indent: -9999em;         margin50px 50px;         positionrelative;         floatleft;         font-size11px;         -webkit-animation-delay: 0.16s;         animation-delay: 0.16s;       }       #loader1:after {         left: 1.5em;         -webkit-animation-delay: 0.32s;         animation-delay: 0.32s;       }       @-webkit-keyframes load1 {         0%,         80%,         100% {           box-shadow: 0 0 #f2fa08;           height: 4em;         }         40% {           box-shadow: 0 -2em #f2fa08;           height: 5em;         }       }       @keyframes load1 {         0%,         80%,         100% {           box-shadow: 0 0 #f2ff08;           height: 4em;         }         40% {           box-shadow: 0 -2em #f2ff08;           height: 5em;         }       }        

以上就是本文的全部内容,希望对大家的学习有所帮助。

CSS3绘制超炫的上下起伏波动进度加载动画