CSS3实现Loading加载动画特效大全

来源：互联网发布：java怎么设置环境变量编辑：程序博客网时间：2024/04/30 21:16

目前大部分WEB开发加载(loading)特效是采用gif图片形式展现，随着HTML5+CSS3技术的成熟，纯CSS3版本Loading加载动画效果已经可以比拟gif动画效果，当然是需要浏览器的兼容性要好，下面大头网介绍8款CSS3 Loading加载动画效果。注：转载请注明出处！

.spinner {  margin: 100px auto;  width: 50px;  height: 60px;  text-align: center;  font-size: 10px;}.spinner > div {  background-color: #67CF22;  height: 100%;  width: 6px;  display: inline-block;     -webkit-animation: stretchdelay 1.2s infinite ease-in-out;  animation: stretchdelay 1.2s infinite ease-in-out;}.spinner .rect2 {  -webkit-animation-delay: -1.1s;  animation-delay: -1.1s;}.spinner .rect3 {  -webkit-animation-delay: -1.0s;  animation-delay: -1.0s;}.spinner .rect4 {  -webkit-animation-delay: -0.9s;  animation-delay: -0.9s;}.spinner .rect5 {  -webkit-animation-delay: -0.8s;  animation-delay: -0.8s;}@-webkit-keyframes stretchdelay {  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }    20% { -webkit-transform: scaleY(1.0) }}@keyframes stretchdelay {  0%, 40%, 100% {     transform: scaleY(0.4);    -webkit-transform: scaleY(0.4);  }  20% {     transform: scaleY(1.0);    -webkit-transform: scaleY(1.0);  }}

<div class="spinner">  <div class="rect1"></div>  <div class="rect2"></div>  <div class="rect3"></div>  <div class="rect4"></div>  <div class="rect5"></div></div>

0 0