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

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

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

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

 

完整源码下载

您可能感兴趣的相关文章

 

本文链接:分享8个使用 CSS3 实现的超炫的网页加载动画效果

编译来源:前端里 ◆ 关注前端开发技术 ◆ 分享网页设计资源

本文来自【前端里(http://www.yyyweb.com/)】

赞 (0) 打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏