如何通过CSS3实现loading的效果
2016-04-10 本文已影响331人
MakingChoice
在移动端今天跳转或者加载数据的时候，为了更好的体验可以通过添加过的loading效果来进行过渡。下面我用CSS3写了一个loading的效果，来看一下效果。<p>
jdfw.gif
在添加过渡的时候，只要把上面的效果添加到一个modal模态层中就可以实现了。<p>
下面是步骤：<p>
1、在<code>body</code>中添加一个<code>div</code>为其添加<code>preloader</code>类。
下面是代码：<p>
<body> <div class="preloader"> </div></body>
2、在<code>preloader</code>类中设置<code>div</code>的大小和动画效果。这个动画效果的目的就是实现这个<code>div</code>围绕自己的中心不停的旋转。step的讲解，下面是其连接可以看一下:step
下面是代码：<p>
.preloader {
display: inline-block;
width: 5rem;
height: 5rem;
-webkit-transform-origin: 50%;
transform-origin: 50%;
-webkit-animation: preloader-spin 1s steps(12, end) infinite;
animation: preloader-spin 1s steps(12, end) infinite;
}
@-webkit-keyframes preloader-spin {
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes preloader-spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
3、通过<code>preloader</code>类的:after伪类来添加背景图，把loading的jpg添加进来。
下面是代码：<p>
.preloader:after {
display: block;
content: "";
width: 100%;
height: 100%;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
background-position: 50%;
background-size: 100%;
background-repeat: no-repeat;
}
其实原理就是通过一个单独的一个静态的图片，如下图所示，让其不停的旋转产生loading的效果。<p>
静态图片.png
