html5加载动画效果,用纯CSS实现加载中动画效果

今天要介绍的是用简单的CSS——只用CSS，不用Gif——制作“加载中…”动画效果。先看看效果：

上面的这个加载中效果，以前是用gif动图实现的，但随着CSS的进步，CSS动画功能越来越强大，我们只用一小片段HTML和CSS就能实现，方便了很多，体积也减小了很多。

再加上一些CSS：

.pswp__preloader__icn {

opacity:0.75;

width: 24px;

height: 24px;

-webkit-animation: clockwise 500ms linear infinite;

animation: clockwise 500ms linear infinite;

}

/* The idea of animating inner circle is based on Polymer loading indicator by Keanu Lee https://blog.keanulee.com/2014/10/20/the-tale-of-three-spinners.html */

.pswp__preloader__cut {

position: relative;

width: 12px;

height: 24px;

overflow: hidden;

position: absolute;

top: 0;

left: 0;

}

.pswp__preloader__donut {

box-sizing: border-box;

width: 24px;

height: 24px;

border: 2px solid #000;

border-radius: 50%;

border-left-color: transparent;

border-bottom-color: transparent;

position: absolute;

top: 0;

left: 0;

background: none;

margin:0;

-webkit-animation: donut-rotate 1000ms cubic-bezier(.4,0,.22,1) infinite;

animation: donut-rotate 1000ms cubic-bezier(.4,0,.22,1) infinite;

}

@-webkit-keyframes clockwise {

0% { -webkit-transform: rotate(0deg) }

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

}

@keyframes clockwise {

0% { transform: rotate(0deg) }

100% { transform: rotate(360deg) }

}

@-webkit-keyframes donut-rotate {

0% { -webkit-transform: rotate(0) }

50% { -webkit-transform: rotate(-140deg) }

100% { -webkit-transform: rotate(0) }

}

@keyframes donut-rotate {

0% { transform: rotate(0) }

50% { transform: rotate(-140deg) }

100% { transform: rotate(0) }

}