在我们这次的新设计教程中,我将向您展示如何创建纯CSS3的loading加载动画组件(没有任何图像)。我认为它可以为你减少项目的代码量和额外的图像对你网站的负载。我准备了三种不同风格的加载组件。现在,让我们看看我做的。GWcHTML5中文学习网 - HTML5先行者学习网
css3-loadingGWcHTML5中文学习网 - HTML5先行者学习网
Step 1. HTMLGWcHTML5中文学习网 - HTML5先行者学习网
你可以在这里看到的三个元素–放置“加载”元素的div。GWcHTML5中文学习网 - HTML5先行者学习网
代码如下 | |
<div class="main_body">GWcHTML5中文学习网 - HTML5先行者学习网 <div class="element">GWcHTML5中文学习网 - HTML5先行者学习网 <div class="loading1">GWcHTML5中文学习网 - HTML5先行者学习网 <div></div>GWcHTML5中文学习网 - HTML5先行者学习网 <div></div>GWcHTML5中文学习网 - HTML5先行者学习网 <div></div>GWcHTML5中文学习网 - HTML5先行者学习网 <div></div>GWcHTML5中文学习网 - HTML5先行者学习网 <div></div>GWcHTML5中文学习网 - HTML5先行者学习网 <div></div>GWcHTML5中文学习网 - HTML5先行者学习网 <div></div>GWcHTML5中文学习网 - HTML5先行者学习网 <div></div>GWcHTML5中文学习网 - HTML5先行者学习网 </div>GWcHTML5中文学习网 - HTML5先行者学习网 </div>GWcHTML5中文学习网 - HTML5先行者学习网 <div class="element">GWcHTML5中文学习网 - HTML5先行者学习网 <div class="loading2">GWcHTML5中文学习网 - HTML5先行者学习网 <div></div>GWcHTML5中文学习网 - HTML5先行者学习网 <div></div>GWcHTML5中文学习网 - HTML5先行者学习网 <div></div>GWcHTML5中文学习网 - HTML5先行者学习网 <div></div>GWcHTML5中文学习网 - HTML5先行者学习网 <div></div>GWcHTML5中文学习网 - HTML5先行者学习网 <div></div>GWcHTML5中文学习网 - HTML5先行者学习网 <div></div>GWcHTML5中文学习网 - HTML5先行者学习网 <div></div>GWcHTML5中文学习网 - HTML5先行者学习网 </div>GWcHTML5中文学习网 - HTML5先行者学习网 </div>GWcHTML5中文学习网 - HTML5先行者学习网 <div class="element">GWcHTML5中文学习网 - HTML5先行者学习网 <div class="loading3">GWcHTML5中文学习网 - HTML5先行者学习网 <div></div>GWcHTML5中文学习网 - HTML5先行者学习网 <div></div>GWcHTML5中文学习网 - HTML5先行者学习网 <div></div>GWcHTML5中文学习网 - HTML5先行者学习网 <div></div>GWcHTML5中文学习网 - HTML5先行者学习网 <div></div>GWcHTML5中文学习网 - HTML5先行者学习网 </div>GWcHTML5中文学习网 - HTML5先行者学习网 </div>GWcHTML5中文学习网 - HTML5先行者学习网 </div> |
Step 2. CSSGWcHTML5中文学习网 - HTML5先行者学习网
现在,最有趣的一步,我会给你风格各加载的元素。欢迎来检查的第一个样式:GWcHTML5中文学习网 - HTML5先行者学习网
代码如下 | |
.loading1 {GWcHTML5中文学习网 - HTML5先行者学习网 height:100px;GWcHTML5中文学习网 - HTML5先行者学习网 position:relative;GWcHTML5中文学习网 - HTML5先行者学习网 width:80px;GWcHTML5中文学习网 - HTML5先行者学习网 }GWcHTML5中文学习网 - HTML5先行者学习网 .loading1 > div {GWcHTML5中文学习网 - HTML5先行者学习网 background-color:#FFFFFF;GWcHTML5中文学习网 - HTML5先行者学习网 height:30px;GWcHTML5中文学习网 - HTML5先行者学习网 position:absolute;GWcHTML5中文学习网 - HTML5先行者学习网 width:12px;GWcHTML5中文学习网 - HTML5先行者学习网 /* css3 radius */GWcHTML5中文学习网 - HTML5先行者学习网 -moz-border-radius:5px;GWcHTML5中文学习网 - HTML5先行者学习网 -webkit-border-radius:5px;GWcHTML5中文学习网 - HTML5先行者学习网 border-radius:5px;GWcHTML5中文学习网 - HTML5先行者学习网 /* css3 transform - scale */GWcHTML5中文学习网 - HTML5先行者学习网 -webkit-transform:scale(0.4);GWcHTML5中文学习网 - HTML5先行者学习网 -moz-transform:scale(0.4);GWcHTML5中文学习网 - HTML5先行者学习网 -o-transform:scale(0.4);GWcHTML5中文学习网 - HTML5先行者学习网 /* css3 animation */GWcHTML5中文学习网 - HTML5先行者学习网 -webkit-animation-name:loading1;GWcHTML5中文学习网 - HTML5先行者学习网 -webkit-animation-duration:1.04s;GWcHTML5中文学习网 - HTML5先行者学习网 -webkit-animation-iteration-count:infinite;GWcHTML5中文学习网 - HTML5先行者学习网 -webkit-animation-direction:linear;GWcHTML5中文学习网 - HTML5先行者学习网 -moz-animation-name:loading1;GWcHTML5中文学习网 - HTML5先行者学习网 -moz-animation-duration:1.04s;GWcHTML5中文学习网 - HTML5先行者学习网 -moz-animation-iteration-count:infinite;GWcHTML5中文学习网 - HTML5先行者学习网 -moz-animation-direction:linear;GWcHTML5中文学习网 - HTML5先行者学习网 -o-animation-name:loading1;GWcHTML5中文学习网 - HTML5先行者学习网 -o-animation-duration:1.04s;GWcHTML5中文学习网 - HTML5先行者学习网 -o-animation-iteration-count:infinite;GWcHTML5中文学习网 - HTML5先行者学习网 -o-animation-direction:linear;GWcHTML5中文学习网 - HTML5先行者学习网 }GWcHTML5中文学习网 - HTML5先行者学习网 .loading1 > div:nth-child(1) {GWcHTML5中文学习网 - HTML5先行者学习网 left:0;GWcHTML5中文学习网 - HTML5先行者学习网 top:36px;GWcHTML5中文学习网 - HTML5先行者学习网 /* css3 transform - rotate */GWcHTML5中文学习网 - HTML5先行者学习网 -webkit-transform:rotate(-90deg);GWcHTML5中文学习网 - HTML5先行者学习网 -moz-transform:rotate(-90deg);GWcHTML5中文学习网 - HTML5先行者学习网 -o-transform:rotate(-90deg);GWcHTML5中文学习网 - HTML5先行者学习网 /* css3 animation */GWcHTML5中文学习网 - HTML5先行者学习网 -webkit-animation-delay:0.39s;GWcHTML5中文学习网 - HTML5先行者学习网 -moz-animation-delay:0.39s;GWcHTML5中文学习网 - HTML5先行者学习网 -o-animation-delay:0.39s;GWcHTML5中文学习网 - HTML5先行者学习网 }GWcHTML5中文学习网 - HTML5先行者学习网 .loading1 > div:nth-child(2) {GWcHTML5中文学习网 - HTML5先行者学习网 left:10px;GWcHTML5中文学习网 - HTML5先行者学习网 top:13px;GWcHTML5中文学习网 - HTML5先行者学习网 /* css3 transform - rotate */GWcHTML5中文学习网 - HTML5先行者学习网 -webkit-transform:rotate(-45deg);GWcHTML5中文学习网 - HTML5先行者学习网 -moz-transform:rotate(-45deg);GWcHTML5中文学习网 - HTML5先行者学习网 -o-transform:rotate(-45deg);GWcHTML5中文学习网 - HTML5先行者学习网 /* css3 animation */GWcHTML5中文学习网 - HTML5先行者学习网 -webkit-animation-delay:0.52s;GWcHTML5中文学习网 - HTML5先行者学习网 -moz-animation-delay:0.52s;GWcHTML5中文学习网 - HTML5先行者学习网 -o-animation-delay:0.52s;GWcHTML5中文学习网 - HTML5先行者学习网 }GWcHTML5中文学习网 - HTML5先行者学习网 .loading1 > div:nth-child(3) {GWcHTML5中文学习网 - HTML5先行者学习网 left:34px;GWcHTML5中文学习网 - HTML5先行者学习网 top:4px;GWcHTML5中文学习网 - HTML5先行者学习网 /* css3 transform - rotate */GWcHTML5中文学习网 - HTML5先行者学习网 -webkit-transform:rotate(0deg);GWcHTML5中文学习网 - HTML5先行者学习网 -moz-transform:rotate(0deg);GWcHTML5中文学习网 - HTML5先行者学习网 -o-transform:rotate(0deg);GWcHTML5中文学习网 - HTML5先行者学习网 /* css3 animation */GWcHTML5中文学习网 - HTML5先行者学习网 -webkit-animation-delay:0.65s;GWcHTML5中文学习网 - HTML5先行者学习网 -moz-animation-delay:0.65s;GWcHTML5中文学习网 - HTML5先行者学习网 -o-animation-delay:0.65s;GWcHTML5中文学习网 - HTML5先行者学习网 }GWcHTML5中文学习网 - HTML5先行者学习网 .loading1 > div:nth-child(4) {GWcHTML5中文学习网 - HTML5先行者学习网 right:10px;GWcHTML5中文学习网 - HTML5先行者学习网 top:13px;GWcHTML5中文学习网 - HTML5先行者学习网 /* css3 transform - rotate */GWcHTML5中文学习网 - HTML5先行者学习网 -webkit-transform:rotate(45deg);GWcHTML5中文学习网 - HTML5先行者学习网 -moz-transform:rotate(45deg);GWcHTML5中文学习网 - HTML5先行者学习网 -o-transform:rotate(45deg);GWcHTML5中文学习网 - HTML5先行者学习网 /* css3 animation */GWcHTML5中文学习网 - HTML5先行者学习网 -webkit-animation-delay:0.78s;GWcHTML5中文学习网 - HTML5先行者学习网 -moz-animation-delay:0.78s;GWcHTML5中文学习网 - HTML5先行者学习网 -o-animation-delay:0.78s;GWcHTML5中文学习网 - HTML5先行者学习网 }GWcHTML5中文学习网 - HTML5先行者学习网 .loading1 > div:nth-child(5) {GWcHTML5中文学习网 - HTML5先行者学习网 right:0;GWcHTML5中文学习网 - HTML5先行者学习网 top:36px;GWcHTML5中文学习网 - HTML5先行者学习网 /* css3 transform - rotate */GWcHTML5中文学习网 - HTML5先行者学习网 -webkit-transform:rotate(90deg);GWcHTML5中文学习网 - HTML5先行者学习网 -moz-transform:rotate(90deg);GWcHTML5中文学习网 - HTML5先行者学习网 -o-transform:rotate(90deg);GWcHTML5中文学习网 - HTML5先行者学习网 /* css3 animation */GWcHTML5中文学习网 - HTML5先行者学习网 -webkit-animation-delay:0.91s;GWcHTML5中文学习网 - HTML5先行者学习网 -moz-animation-delay:0.91s;GWcHTML5中文学习网 - HTML5先行者学习网 -o-animation-delay:0.91s;GWcHTML5中文学习网 - HTML5先行者学习网 }GWcHTML5中文学习网 - HTML5先行者学习网 .loading1 > div:nth-child(6) {GWcHTML5中文学习网 - HTML5先行者学习网 right:10px;GWcHTML5中文学习网 - HTML5先行者学习网 bottom:9px;GWcHTML5中文学习网 - HTML5先行者学习网 /* css3 transform - rotate */GWcHTML5中文学习网 - HTML5先行者学习网 -webkit-transform:rotate(135deg);GWcHTML5中文学习网 - HTML5先行者学习网 -moz-transform:rotate(135deg);GWcHTML5中文学习网 - HTML5先行者学习网 -o-transform:rotate(135deg);GWcHTML5中文学习网 - HTML5先行者学习网 /* css3 animation */GWcHTML5中文学习网 - HTML5先行者学习网 -webkit-animation-delay:1.04s;GWcHTML5中文学习网 - HTML5先行者学习网 -moz-animation-delay:1.04s;GWcHTML5中文学习网 - HTML5先行者学习网 -o-animation-delay:1.04s;GWcHTML5中文学习网 - HTML5先行者学习网 }GWcHTML5中文学习网 - HTML5先行者学习网 .loading1 > div:nth-child(7) {GWcHTML5中文学习网 - HTML5先行者学习网 bottom:0;GWcHTML5中文学习网 - HTML5先行者学习网 left:34px;GWcHTML5中文学习网 - HTML5先行者学习网 /* css3 transform - rotate */GWcHTML5中文学习网 - HTML5先行者学习网 -webkit-transform:rotate(180deg);GWcHTML5中文学习网 - HTML5先行者学习网 -moz-transform:rotate(180deg);GWcHTML5中文学习网 - HTML5先行者学习网 -o-transform:rotate(180deg);GWcHTML5中文学习网 - HTML5先行者学习网 /* css3 animation */GWcHTML5中文学习网 - HTML5先行者学习网 -webkit-animation-delay:1.17s;GWcHTML5中文学习网 - HTML5先行者学习网 -moz-animation-delay:1.17s;GWcHTML5中文学习网 - HTML5先行者学习网 -o-animation-delay:1.17s;GWcHTML5中文学习网 - HTML5先行者学习网 }GWcHTML5中文学习网 - HTML5先行者学习网 .loading1 > div:nth-child(8) {GWcHTML5中文学习网 - HTML5先行者学习网 left:10px;GWcHTML5中文学习网 - HTML5先行者学习网 bottom:9px;GWcHTML5中文学习网 - HTML5先行者学习网 /* css3 transform - rotate */GWcHTML5中文学习网 - HTML5先行者学习网 -webkit-transform:rotate(-135deg);GWcHTML5中文学习网 - HTML5先行者学习网 -moz-transform:rotate(-135deg);GWcHTML5中文学习网 - HTML5先行者学习网 -o-transform:rotate(-135deg);GWcHTML5中文学习网 - HTML5先行者学习网 /* css3 animation */GWcHTML5中文学习网 - HTML5先行者学习网 -webkit-animation-delay:1.3s;GWcHTML5中文学习网 - HTML5先行者学习网 -moz-animation-delay:1.3s;GWcHTML5中文学习网 - HTML5先行者学习网 -o-animation-delay:1.3s;GWcHTML5中文学习网 - HTML5先行者学习网 }GWcHTML5中文学习网 - HTML5先行者学习网 /* css3 keyframes - loading1 */GWcHTML5中文学习网 - HTML5先行者学习网 @-webkit-keyframes loading1 {GWcHTML5中文学习网 - HTML5先行者学习网 0%{ background-color:#000000 }GWcHTML5中文学习网 - HTML5先行者学习网 100%{ background-color:#FFFFFF }GWcHTML5中文学习网 - HTML5先行者学习网 }GWcHTML5中文学习网 - HTML5先行者学习网 @-moz-keyframes loading1 {GWcHTML5中文学习网 - HTML5先行者学习网 0%{ background-color:#000000 }GWcHTML5中文学习网 - HTML5先行者学习网 100%{ background-color:#FFFFFF }GWcHTML5中文学习网 - HTML5先行者学习网 }GWcHTML5中文学习网 - HTML5先行者学习网 @-o-keyframes loading1 {GWcHTML5中文学习网 - HTML5先行者学习网 0%{ background-color:#000000 }GWcHTML5中文学习网 - HTML5先行者学习网 100%{ background-color:#FFFFFF }GWcHTML5中文学习网 - HTML5先行者学习网 } |
你可以看到–我用CSS3动画关键帧,每一步(点)是彼此分离的延迟。现在,请查看我们的第二负载的风格元素:GWcHTML5中文学习网 - HTML5先行者学习网
代码如下 | |
.loading2 {GWcHTML5中文学习网 - HTML5先行者学习网 height:140px;GWcHTML5中文学习网 - HTML5先行者学习网 position:relative;GWcHTML5中文学习网 - HTML5先行者学习网 width:140px;GWcHTML5中文学习网 - HTML5先行者学习网 /* css3 transform - scale */GWcHTML5中文学习网 - HTML5先行者学习网 -webkit-transform:scale(0.6);GWcHTML5中文学习网 - HTML5先行者学习网 -moz-transform:scale(0.6);GWcHTML5中文学习网 - HTML5先行者学习网 -o-transform:scale(0.6);GWcHTML5中文学习网 - HTML5先行者学习网 }GWcHTML5中文学习网 - HTML5先行者学习网 .loading2 > div {GWcHTML5中文学习网 - HTML5先行者学习网 background-color:#FFFFFF;GWcHTML5中文学习网 - HTML5先行者学习网 height:25px;GWcHTML5中文学习网 - HTML5先行者学习网 position:absolute;GWcHTML5中文学习网 - HTML5先行者学习网 width:25px;GWcHTML5中文学习网 - HTML5先行者学习网 /* css3 radius */GWcHTML5中文学习网 - HTML5先行者学习网 -moz-border-radius:15px;GWcHTML5中文学习网 - HTML5先行者学习网 -webkit-border-radius:15px;GWcHTML5中文学习网 - HTML5先行者学习网 border-radius:15px;GWcHTML5中文学习网 - HTML5先行者学习网 /* css3 animation */GWcHTML5中文学习网 - HTML5先行者学习网 -webkit-animation-name:loading2;GWcHTML5中文学习网 - HTML5先行者学习网 -webkit-animation-duration:1.04s;GWcHTML5中文学习网 - HTML5先行者学习网 -webkit-animation-iteration-count:infinite;GWcHTML5中文学习网 - HTML5先行者学习网 -webkit-animation-direction:linear;GWcHTML5中文学习网 - HTML5先行者学习网 -moz-animation-name:loading2;GWcHTML5中文学习网 - HTML5先行者学习网 -moz-animation-duration:1.04s;GWcHTML5中文学习网 - HTML5先行者学习网 -moz-animation-iteration-count:infinite;GWcHTML5中文学习网 - HTML5先行者学习网 -moz-animation-direction:linear;GWcHTML5中文学习网 - HTML5先行者学习网 -o-animation-name:loading2;GWcHTML5中文学习网 - HTML5先行者学习网 -o-animation-duration:1.04s;GWcHTML5中文学习网 - HTML5先行者学习网 -o-animation-iteration-count:infinite;GWcHTML5中文学习网 - HTML5先行者学习网 -o-animation-direction:linear;GWcHTML5中文学习网 - HTML5先行者学习网 }GWcHTML5中文学习网 - HTML5先行者学习网 .loading2 > div:nth-child(1) {GWcHTML5中文学习网 - HTML5先行者学习网 left:0;GWcHTML5中文学习网 - HTML5先行者学习网 top:57px;GWcHTML5中文学习网 - HTML5先行者学习网 /* css3 animation */GWcHTML5中文学习网 - HTML5先行者学习网 -webkit-animation-delay:0.39s;GWcHTML5中文学习网 - HTML5先行者学习网 -moz-animation-delay:0.39s;GWcHTML5中文学习网 - HTML5先行者学习网 -o-animation-delay:0.39s;GWcHTML5中文学习网 - HTML5先行者学习网 }GWcHTML5中文学习网 - HTML5先行者学习网 .loading2 > div:nth-child(2) {GWcHTML5中文学习网 - HTML5先行者学习网 left:17px;GWcHTML5中文学习网 - HTML5先行者学习网 top:17px;GWcHTML5中文学习网 - HTML5先行者学习网 /* css3 animation */GWcHTML5中文学习网 - HTML5先行者学习网 -webkit-animation-delay:0.52s;GWcHTML5中文学习网 - HTML5先行者学习网 -moz-animation-delay:0.52s;GWcHTML5中文学习网 - HTML5先行者学习网 -o-animation-delay:0.52s;GWcHTML5中文学习网 - HTML5先行者学习网 }GWcHTML5中文学习网 - HTML5先行者学习网 .loading2 > div:nth-child(3) {GWcHTML5中文学习网 - HTML5先行者学习网 left:57px;GWcHTML5中文学习网 - HTML5先行者学习网 top:0;GWcHTML5中文学习网 - HTML5先行者学习网 /* css3 animation */GWcHTML5中文学习网 - HTML5先行者学习网 -webkit-animation-delay:0.65s;GWcHTML5中文学习网 - HTML5先行者学习网 -moz-animation-delay:0.65s;GWcHTML5中文学习网 - HTML5先行者学习网 -o-animation-delay:0.65s;GWcHTML5中文学习网 - HTML5先行者学习网 }GWcHTML5中文学习网 - HTML5先行者学习网 .loading2 > div:nth-child(4) {GWcHTML5中文学习网 - HTML5先行者学习网 right:17px;GWcHTML5中文学习网 - HTML5先行者学习网 top:17px;GWcHTML5中文学习网 - HTML5先行者学习网 /* css3 animation */GWcHTML5中文学习网 - HTML5先行者学习网 -webkit-animation-delay:0.78s;GWcHTML5中文学习网 - HTML5先行者学习网 -moz-animation-delay:0.78s;GWcHTML5中文学习网 - HTML5先行者学习网 -o-animation-delay:0.78s;GWcHTML5中文学习网 - HTML5先行者学习网 }GWcHTML5中文学习网 - HTML5先行者学习网 .loading2 > div:nth-child(5) {GWcHTML5中文学习网 - HTML5先行者学习网 right:0;GWcHTML5中文学习网 - HTML5先行者学习网 top:57px;GWcHTML5中文学习网 - HTML5先行者学习网 /* css3 animation */GWcHTML5中文学习网 - HTML5先行者学习网 -webkit-animation-delay:0.91s;GWcHTML5中文学习网 - HTML5先行者学习网 -moz-animation-delay:0.91s;GWcHTML5中文学习网 - HTML5先行者学习网 -o-animation-delay:0.91s;GWcHTML5中文学习网 - HTML5先行者学习网 }GWcHTML5中文学习网 - HTML5先行者学习网 .loading2 > div:nth-child(6) {GWcHTML5中文学习网 - HTML5先行者学习网 right:17px;GWcHTML5中文学习网 - HTML5先行者学习网 bottom:17px;GWcHTML5中文学习网 - HTML5先行者学习网 /* css3 animation */GWcHTML5中文学习网 - HTML5先行者学习网 -webkit-animation-delay:1.04s;GWcHTML5中文学习网 - HTML5先行者学习网 -moz-animation-delay:1.04s;GWcHTML5中文学习网 - HTML5先行者学习网 -o-animation-delay:1.04s;GWcHTML5中文学习网 - HTML5先行者学习网 }GWcHTML5中文学习网 - HTML5先行者学习网 .loading2 > div:nth-child(7) {GWcHTML5中文学习网 - HTML5先行者学习网 left:57px;GWcHTML5中文学习网 - HTML5先行者学习网 bottom:0;GWcHTML5中文学习网 - HTML5先行者学习网 /* css3 animation */GWcHTML5中文学习网 - HTML5先行者学习网 -webkit-animation-delay:1.17s;GWcHTML5中文学习网 - HTML5先行者学习网 -moz-animation-delay:1.17s;GWcHTML5中文学习网 - HTML5先行者学习网 -o-animation-delay:1.17s;GWcHTML5中文学习网 - HTML5先行者学习网 }GWcHTML5中文学习网 - HTML5先行者学习网 .loading2 > div:nth-child(8) {GWcHTML5中文学习网 - HTML5先行者学习网 left:17px;GWcHTML5中文学习网 - HTML5先行者学习网 bottom:17px;GWcHTML5中文学习网 - HTML5先行者学习网 /* css3 animation */GWcHTML5中文学习网 - HTML5先行者学习网 -webkit-animation-delay:1.3s;GWcHTML5中文学习网 - HTML5先行者学习网 -moz-animation-delay:1.3s;GWcHTML5中文学习网 - HTML5先行者学习网 -o-animation-delay:1.3s;GWcHTML5中文学习网 - HTML5先行者学习网 }GWcHTML5中文学习网 - HTML5先行者学习网 /* css3 keyframes - loading2 */GWcHTML5中文学习网 - HTML5先行者学习网 @-webkit-keyframes loading2 {GWcHTML5中文学习网 - HTML5先行者学习网 0%{ background-color:#000000 }GWcHTML5中文学习网 - HTML5先行者学习网 100%{ background-color:#FFFFFF }GWcHTML5中文学习网 - HTML5先行者学习网 }GWcHTML5中文学习网 - HTML5先行者学习网 @-moz-keyframes loading2 {GWcHTML5中文学习网 - HTML5先行者学习网 0%{ background-color:#000000 }GWcHTML5中文学习网 - HTML5先行者学习网 100%{ background-color:#FFFFFF }GWcHTML5中文学习网 - HTML5先行者学习网 }GWcHTML5中文学习网 - HTML5先行者学习网 @-o-keyframes loading2 {GWcHTML5中文学习网 - HTML5先行者学习网 0%{ background-color:#000000 }GWcHTML5中文学习网 - HTML5先行者学习网 100%{ background-color:#FFFFFF }GWcHTML5中文学习网 - HTML5先行者学习网 } |
我在这里使用相同的理念作为第一要素,但是,稍微改变风格。最后–第三”加载元件:GWcHTML5中文学习网 - HTML5先行者学习网
代码如下 | |
.loading3 > div {GWcHTML5中文学习网 - HTML5先行者学习网 background-color:#FFFFFF;GWcHTML5中文学习网 - HTML5先行者学习网 border:1px solid #000000;GWcHTML5中文学习网 - HTML5先行者学习网 float:left;GWcHTML5中文学习网 - HTML5先行者学习网 height:114px;GWcHTML5中文学习网 - HTML5先行者学习网 margin-left:5px;GWcHTML5中文学习网 - HTML5先行者学习网 width:30px;GWcHTML5中文学习网 - HTML5先行者学习网 opacity:0.1;GWcHTML5中文学习网 - HTML5先行者学习网 /* css3 transform - scale */GWcHTML5中文学习网 - HTML5先行者学习网 -webkit-transform:scale(0.8);GWcHTML5中文学习网 - HTML5先行者学习网 -moz-transform:scale(0.8);GWcHTML5中文学习网 - HTML5先行者学习网 -o-transform:scale(0.8);GWcHTML5中文学习网 - HTML5先行者学习网 /* css3 animation */GWcHTML5中文学习网 - HTML5先行者学习网 -webkit-animation-name:loading3;GWcHTML5中文学习网 - HTML5先行者学习网 -webkit-animation-duration:1.2s;GWcHTML5中文学习网 - HTML5先行者学习网 -webkit-animation-iteration-count:infinite;GWcHTML5中文学习网 - HTML5先行者学习网 -webkit-animation-direction:linear;GWcHTML5中文学习网 - HTML5先行者学习网 -moz-animation-name:loading3;GWcHTML5中文学习网 - HTML5先行者学习网 -moz-animation-duration:1.2s;GWcHTML5中文学习网 - HTML5先行者学习网 -moz-animation-iteration-count:infinite;GWcHTML5中文学习网 - HTML5先行者学习网 -moz-animation-direction:linear;GWcHTML5中文学习网 - HTML5先行者学习网 -o-animation-name:loading3;GWcHTML5中文学习网 - HTML5先行者学习网 -o-animation-duration:1.2s;GWcHTML5中文学习网 - HTML5先行者学习网 -o-animation-iteration-count:infinite;GWcHTML5中文学习网 - HTML5先行者学习网 -o-animation-direction:linear;GWcHTML5中文学习网 - HTML5先行者学习网 }GWcHTML5中文学习网 - HTML5先行者学习网 .loading3 > div:nth-child(1) {GWcHTML5中文学习网 - HTML5先行者学习网 /* css3 animation */GWcHTML5中文学习网 - HTML5先行者学习网 -webkit-animation-delay:0.24s;GWcHTML5中文学习网 - HTML5先行者学习网 -moz-animation-delay:0.24s;GWcHTML5中文学习网 - HTML5先行者学习网 -o-animation-delay:0.24s;GWcHTML5中文学习网 - HTML5先行者学习网 }GWcHTML5中文学习网 - HTML5先行者学习网 .loading3 > div:nth-child(2) {GWcHTML5中文学习网 - HTML5先行者学习网 /* css3 animation */GWcHTML5中文学习网 - HTML5先行者学习网 -webkit-animation-delay:0.48s;GWcHTML5中文学习网 - HTML5先行者学习网 -moz-animation-delay:0.48s;GWcHTML5中文学习网 - HTML5先行者学习网 -o-animation-delay:0.48s;GWcHTML5中文学习网 - HTML5先行者学习网 }GWcHTML5中文学习网 - HTML5先行者学习网 .loading3 > div:nth-child(3) {GWcHTML5中文学习网 - HTML5先行者学习网 /* css3 animation */GWcHTML5中文学习网 - HTML5先行者学习网 -webkit-animation-delay:0.72s;GWcHTML5中文学习网 - HTML5先行者学习网 -moz-animation-delay:0.72s;GWcHTML5中文学习网 - HTML5先行者学习网 -o-animation-delay:0.72s;GWcHTML5中文学习网 - HTML5先行者学习网 }GWcHTML5中文学习网 - HTML5先行者学习网 .loading3 > div:nth-child(4) {GWcHTML5中文学习网 - HTML5先行者学习网 /* css3 animation */GWcHTML5中文学习网 - HTML5先行者学习网 -webkit-animation-delay:0.96s;GWcHTML5中文学习网 - HTML5先行者学习网 -moz-animation-delay:0.96s;GWcHTML5中文学习网 - HTML5先行者学习网 -o-animation-delay:0.96s;GWcHTML5中文学习网 - HTML5先行者学习网 }GWcHTML5中文学习网 - HTML5先行者学习网 .loading3 > div:nth-child(5) {GWcHTML5中文学习网 - HTML5先行者学习网 /* css3 animation */GWcHTML5中文学习网 - HTML5先行者学习网 -webkit-animation-delay:1.2s;GWcHTML5中文学习网 - HTML5先行者学习网 -moz-animation-delay:1.2s;GWcHTML5中文学习网 - HTML5先行者学习网 -o-animation-delay:1.2s;GWcHTML5中文学习网 - HTML5先行者学习网 }GWcHTML5中文学习网 - HTML5先行者学习网 /* css3 keyframes - loading3 */GWcHTML5中文学习网 - HTML5先行者学习网 @-webkit-keyframes loading3 {GWcHTML5中文学习网 - HTML5先行者学习网 0% {GWcHTML5中文学习网 - HTML5先行者学习网 -webkit-transform:scale(1.2);GWcHTML5中文学习网 - HTML5先行者学习网 opacity:1;GWcHTML5中文学习网 - HTML5先行者学习网 }GWcHTML5中文学习网 - HTML5先行者学习网 100% {GWcHTML5中文学习网 - HTML5先行者学习网 -webkit-transform:scale(0.7);GWcHTML5中文学习网 - HTML5先行者学习网 opacity:0.1;GWcHTML5中文学习网 - HTML5先行者学习网 }GWcHTML5中文学习网 - HTML5先行者学习网 }GWcHTML5中文学习网 - HTML5先行者学习网 @-moz-keyframes loading3 {GWcHTML5中文学习网 - HTML5先行者学习网 0% {GWcHTML5中文学习网 - HTML5先行者学习网 -moz-transform:scale(1.2);GWcHTML5中文学习网 - HTML5先行者学习网 opacity:1;GWcHTML5中文学习网 - HTML5先行者学习网 }GWcHTML5中文学习网 - HTML5先行者学习网 100% {GWcHTML5中文学习网 - HTML5先行者学习网 -moz-transform:scale(0.7);GWcHTML5中文学习网 - HTML5先行者学习网 opacity:0.1;GWcHTML5中文学习网 - HTML5先行者学习网 }GWcHTML5中文学习网 - HTML5先行者学习网 }GWcHTML5中文学习网 - HTML5先行者学习网 @-o-keyframes loading3 {GWcHTML5中文学习网 - HTML5先行者学习网 0% {GWcHTML5中文学习网 - HTML5先行者学习网 -o-transform:scale(1.2);GWcHTML5中文学习网 - HTML5先行者学习网 opacity:1;GWcHTML5中文学习网 - HTML5先行者学习网 }GWcHTML5中文学习网 - HTML5先行者学习网 100% {GWcHTML5中文学习网 - HTML5先行者学习网 -o-transform:scale(0.7);GWcHTML5中文学习网 - HTML5先行者学习网 opacity:0.1;GWcHTML5中文学习网 - HTML5先行者学习网 }GWcHTML5中文学习网 - HTML5先行者学习网 } |
这就是今天的。我们刚刚创建的三种不同的“加载”元素。我希望一切都对你很容易和你一样的结果。祝你好运!GWcHTML5中文学习网 - HTML5先行者学习网