HTML5资讯

当前位置: HTML5技术网 > HTML5资讯 > 使用 CSS3 实现超炫的 Loading(加载)动画效果

使用 CSS3 实现超炫的 Loading(加载)动画效果

        SpinKit 是一套网页动画效果,包含8种基于 CSS3 实现的很炫的加载动画。借助 CSS3 Animation 的强大功能来创建平滑,易于定制的动画。SpinKit 的目标不是提供一个每个浏览器都兼容的解决方案,而是给现代浏览器提供更优的技术实现方案和更佳的使用体验。(为保证最佳的效果,请在 Chrome、Firefox 和 Safari 等现代浏览器中浏览)


Loading 动画效果一

         

HTML 代码:


<div class="spinner">

  <div class="rect1"></div>

  <div class="rect2"></div>

  <div class="rect3"></div>

  <div class="rect4"></div>

  <div class="rect5"></div>

</div>


CSS 代码:


.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);

  }

}


Loading 动画效果二

 

HTML 代码:


<div class="spinner"></div>


CSS 代码:


.spinner {

  width: 60px;

  height: 60px;

  background-color: #67CF22;

 

  margin: 100px auto;

  -webkit-animation: rotateplane 1.2s infinite ease-in-out;

  animation: rotateplane 1.2s infinite ease-in-out;

}

 

@-webkit-keyframes rotateplane {

  0% { -webkit-transform: perspective(120px) }

  50% { -webkit-transform: perspective(120px) rotateY(180deg) }

  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }

}

 

@keyframes rotateplane {

  0% { 

    transform: perspective(120px) rotateX(0deg) rotateY(0deg);

    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 

  } 50% { 

    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);

    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 

  } 100% { 

    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);

    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);

  }

}

Loading 动画效果三

 

HTML 代码:


<div class="spinner">

  <div class="double-bounce1"></div>

  <div class="double-bounce2"></div>

</div>


CSS 代码:


.spinner {

  width: 60px;

  height: 60px;

 

  position: relative;

  margin: 100px auto;

}

 

.double-bounce1, .double-bounce2 {

  width: 100%;

  height: 100%;

  border-radius: 50%;

  background-color: #67CF22;

  opacity: 0.6;

  position: absolute;

  top: 0;

  left: 0;

   

  -webkit-animation: bounce 2.0s infinite ease-in-out;

  animation: bounce 2.0s infinite ease-in-out;

}

 

.double-bounce2 {

  -webkit-animation-delay: -1.0s;

  animation-delay: -1.0s;

}

 

@-webkit-keyframes bounce {

  0%, 100% { -webkit-transform: scale(0.0) }

  50% { -webkit-transform: scale(1.0) }

}

 

@keyframes bounce {

  0%, 100% { 

    transform: scale(0.0);

    -webkit-transform: scale(0.0);

  } 50% { 

    transform: scale(1.0);

    -webkit-transform: scale(1.0);

  }

}


Loading 动画效果四



 HTML 代码:


<div class="spinner">

  <div class="cube1"></div>

  <div class="cube2"></div>

</div>


CSS 代码:


.spinner {

  margin: 100px auto;

  width: 32px;

  height: 32px;

  position: relative;

}

 

.cube1, .cube2 {

  background-color: #67CF22;

  width: 30px;

  height: 30px;

  position: absolute;

  top: 0;

  left: 0;

   

  -webkit-animation: cubemove 1.8s infinite ease-in-out;

  animation: cubemove 1.8s infinite ease-in-out;

}

 

.cube2 {

  -webkit-animation-delay: -0.9s;

  animation-delay: -0.9s;

}

 

@-webkit-keyframes cubemove {

  25% { -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5) }

  50% { -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg) }

  75% { -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) }

  100% { -webkit-transform: rotate(-360deg) }

}

 

@keyframes cubemove {

  25% { 

    transform: translateX(42px) rotate(-90deg) scale(0.5);

    -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);

  } 50% { 

    transform: translateX(42px) translateY(42px) rotate(-179deg);

    -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);

  } 50.1% { 

    transform: translateX(42px) translateY(42px) rotate(-180deg);

    -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);

  } 75% { 

    transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);

    -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);

  } 100% { 

    transform: rotate(-360deg);

    -webkit-transform: rotate(-360deg);

  }

}


Loading 动画效果五


  

 HTML 代码:


<div class="spinner">

  <div class="dot1"></div>

  <div class="dot2"></div>

</div>


CSS 代码:


.spinner {

  margin: 100px auto;

  width: 90px;

  height: 90px;

  position: relative;

  text-align: center;

   

  -webkit-animation: rotate 2.0s infinite linear;

  animation: rotate 2.0s infinite linear;

}

 

.dot1, .dot2 {

  width: 60%;

  height: 60%;

  display: inline-block;

  position: absolute;

  top: 0;

  background-color: #67CF22;

  border-radius: 100%;

   

  -webkit-animation: bounce 2.0s infinite ease-in-out;

  animation: bounce 2.0s infinite ease-in-out;

}

 

.dot2 {

  top: auto;

  bottom: 0px;

  -webkit-animation-delay: -1.0s;

  animation-delay: -1.0s;

}

 

@-webkit-keyframes rotate { 100% { -webkit-transform: rotate(360deg) }}

@keyframes rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }}

 

@-webkit-keyframes bounce {

  0%, 100% { -webkit-transform: scale(0.0) }

  50% { -webkit-transform: scale(1.0) }

}

 

@keyframes bounce {

  0%, 100% { 

    transform: scale(0.0);

    -webkit-transform: scale(0.0);

  } 50% { 

    transform: scale(1.0);

    -webkit-transform: scale(1.0);

  }

}


Loading 动画效果六


     

 HTML 代码:


<div class="spinner">

  <div class="bounce1"></div>

  <div class="bounce2"></div>

  <div class="bounce3"></div>

</div>


CSS 代码:


.spinner {

  margin: 100px auto 0;

  width: 150px;

  text-align: center;

}

 

.spinner > div {

  width: 30px;

  height: 30px;

  background-color: #67CF22;

 

  border-radius: 100%;

  display: inline-block;

  -webkit-animation: bouncedelay 1.4s infinite ease-in-out;

  animation: bouncedelay 1.4s infinite ease-in-out;

  /* Prevent first frame from flickering when animation starts */

  -webkit-animation-fill-mode: both;

  animation-fill-mode: both;

}

 

.spinner .bounce1 {

  -webkit-animation-delay: -0.32s;

  animation-delay: -0.32s;

}

 

.spinner .bounce2 {

  -webkit-animation-delay: -0.16s;

  animation-delay: -0.16s;

}

 

@-webkit-keyframes bouncedelay {

  0%, 80%, 100% { -webkit-transform: scale(0.0) }

  40% { -webkit-transform: scale(1.0) }

}

 

@keyframes bouncedelay {

  0%, 80%, 100% { 

    transform: scale(0.0);

    -webkit-transform: scale(0.0);

  } 40% { 

    transform: scale(1.0);

    -webkit-transform: scale(1.0);

  }

}


Loading 动画效果七



HTML 代码:


<div class="spinner"></div>


CSS 代码:


.spinner {

  width: 40px;

  height: 40px;

  margin: 100px auto;

  background-color: #333;

 

  border-radius: 100%;  

  -webkit-animation: scaleout 1.0s infinite ease-in-out;

  animation: scaleout 1.0s infinite ease-in-out;

}

 

@-webkit-keyframes scaleout {

  0% { -webkit-transform: scale(0.0) }

  100% {

    -webkit-transform: scale(1.0);

    opacity: 0;

  }

}

 

@keyframes scaleout {

  0% { 

    transform: scale(0.0);

    -webkit-transform: scale(0.0);

  } 100% {

    transform: scale(1.0);

    -webkit-transform: scale(1.0);

    opacity: 0;

  }

}


Loading 动画效果八


            

HTML 代码:


<div class="spinner">

  <div class="spinner-container container1">

    <div class="circle1"></div>

    <div class="circle2"></div>

    <div class="circle3"></div>

    <div class="circle4"></div>

  </div>

  <div class="spinner-container container2">

    <div class="circle1"></div>

    <div class="circle2"></div>

    <div class="circle3"></div>

    <div class="circle4"></div>

  </div>

  <div class="spinner-container container3">

    <div class="circle1"></div>

    <div class="circle2"></div>

    <div class="circle3"></div>

    <div class="circle4"></div>

  </div>

</div>


CSS 代码:


.spinner {

  margin: 100px auto;

  width: 20px;

  height: 20px;

  position: relative;

}

 

.container1 > div, .container2 > div, .container3 > div {

  width: 6px;

  height: 6px;

  background-color: #333;

 

  border-radius: 100%;

  position: absolute;

  -webkit-animation: bouncedelay 1.2s infinite ease-in-out;

  animation: bouncedelay 1.2s infinite ease-in-out;

  -webkit-animation-fill-mode: both;

  animation-fill-mode: both;

}

 

.spinner .spinner-container {

  position: absolute;

  width: 100%;

  height: 100%;

}

 

.container2 {

  -webkit-transform: rotateZ(45deg);

  transform: rotateZ(45deg);

}

 

.container3 {

  -webkit-transform: rotateZ(90deg);

  transform: rotateZ(90deg);

}

 

.circle1 { top: 0; left: 0; }

.circle2 { top: 0; right: 0; }

.circle3 { right: 0; bottom: 0; }

.circle4 { left: 0; bottom: 0; }

 

.container2 .circle1 {

  -webkit-animation-delay: -1.1s;

  animation-delay: -1.1s;

}

 

.container3 .circle1 {

  -webkit-animation-delay: -1.0s;

  animation-delay: -1.0s;

}

 

.container1 .circle2 {

  -webkit-animation-delay: -0.9s;

  animation-delay: -0.9s;

}

 

.container2 .circle2 {

  -webkit-animation-delay: -0.8s;

  animation-delay: -0.8s;

}

 

.container3 .circle2 {

  -webkit-animation-delay: -0.7s;

  animation-delay: -0.7s;

}

 

.container1 .circle3 {

  -webkit-animation-delay: -0.6s;

  animation-delay: -0.6s;

}

 

.container2 .circle3 {

  -webkit-animation-delay: -0.5s;

  animation-delay: -0.5s;

}

 

.container3 .circle3 {

  -webkit-animation-delay: -0.4s;

  animation-delay: -0.4s;

}

 

.container1 .circle4 {

  -webkit-animation-delay: -0.3s;

  animation-delay: -0.3s;

}

 

.container2 .circle4 {

  -webkit-animation-delay: -0.2s;

  animation-delay: -0.2s;

}

 

.container3 .circle4 {

  -webkit-animation-delay: -0.1s;

  animation-delay: -0.1s;

}

 

@-webkit-keyframes bouncedelay {

  0%, 80%, 100% { -webkit-transform: scale(0.0) }

  40% { -webkit-transform: scale(1.0) }

}

 

@keyframes bouncedelay {

  0%, 80%, 100% { 

    transform: scale(0.0);

    -webkit-transform: scale(0.0);

  } 40% { 

    transform: scale(1.0);

    -webkit-transform: scale(1.0);

  }

}


完整源码下载

【使用 CSS3 实现超炫的 Loading(加载)动画效果】相关文章

1. 使用 CSS3 实现超炫的 Loading(加载)动画效果

2. 使用 CSS3 实现超炫的 Loading(加载)动画效果

3. 帮助你实现超炫的元素运动效果

4. Jquery实现超炫的弹出层特效

5. CSS3 transition实现超酷图片墙动画效果

6. CSS3 transition实现超酷图片墙动画效果

7. CSS3实现的图片加载动画效果

8. iHover – 30+ 纯 CSS 实现的超炫的图片悬停特效

9. 快速实现超酷动画/过渡效果的CSS3类库

10. 10款超炫的开源jquery的源码预览效果

本文来源:https://www.51html5.com/a3524.html

点击展开全部

﹝使用 CSS3 实现超炫的 Loading(加载)动画效果﹞相关内容

「使用 CSS3 实现超炫的 Loading(加载)动画效果」相关专题

其它栏目

也许您还喜欢