纯CSS3实现的8种Loading动画效果.docx

纯CSS3实现的8种Loading动画效果 效果如图： HTML代码部分（所有效果共用）： div class=load1div class=loader加载中.../div/div 我们从左到右从上到下列出效果对应的CSS代码。 1#效果CSS代码： .load1 .loader,.load1 .loader:before,.load1 .loader:after {background: #FFF;-webkit-animation: load1 1s infinite ease-in-out;animation: load1 1s infinite ease-in-out;width: 1em;height: 4em;}.load1 .loader:before,.load1 .loader:after {position: absolute;top: 0;content: ;}.load1 .loader:before {left: -1.5em;}.load1 .loader {text-indent: -9999em;margin: 40% auto;position: relative;font-size: 11px;-webkit-animation-delay: 0.16s;animation-delay: 0.16s;}.load1 .loader:after {left: 1.5em;-webkit-animation-delay: 0.32s;animation-delay: 0.32s;}@-webkit-keyframes load1 {0%,80%,100% {box-shadow: 0 0 #FFF;height: 4em;}40% {box-shadow: 0 -2em #ffffff;height: 5em;}}@keyframes load1 {0%,80%,100% {box-shadow: 0 0 #FFF;height: 4em;}40% {box-shadow: 0 -2em #ffffff;height: 5em;}} 2#效果CSS代码： .load2 .loader,.load2 .loader:before,.load2 .loader:after {border-radius: 50%;}.load2 .loader:before,.load2 .loader:after {position: absolute;content: ;}.load2 .loader:before {width: 5.2em;height: 10.2em;background: #0dcecb;border-radius: 10.2em 0 0 10.2em;top: -0.1em;left: -0.1em;-webkit-transform-origin: 5.2em 5.1em;transform-origin: 5.2em 5.1em;-webkit-animation: load2 2s infinite ease 1.5s;animation: load2 2s infinite ease 1.5s;}.load2 .loader {font-size: 11px;text-indent: -99999em;margin: 30% auto;position: relative;width: 10em;height: 10em;box-shadow: inset 0 0 0 1em #FFF;}.load2 .loader:after {width: 5.2em;height: 10.2em;background: #0dcecb;border-radius: 0 10.2em 10.2em 0;top: -0.1em;left: 5.1em;-webkit-transform-origin: 0px 5.1em;transform-origin: 0px 5.1em;-webkit-animation: load2 2s infinite ease;animation: load2 2s infinite ease;}@-webkit-keyframes load2 {0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}100% {-webkit-transform: rotate(360deg);trans