css3制作loading加载动画效果代码.doc

《css3制作loading加载动画效果代码.doc》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、.word可编辑.css3制作loading加载动画效果代码　　在我们这次的新设计教程中，我将向您展示如何创建纯css3的loading加载动画组件(没有任何图像)。我认为它可以为你减少项目的代码量和额外的图像对你网站的负载。我准备了三种不同风格的加载组件。现在，让我们看看我做的。css3-loadingstep1.html你可以在这里看到的三个元素–放置“加载”元素的div。代码如下:　　<divclass=main_body<divclass=element<divclass=loadi

2、ng1<div</div<div</div<div</div<div</div<div</div<div</div<div</div<div</div.专业.专注..word可编辑.</div</div<divclass=element<divclass=loading2<div</div<div</div<div</div<div</div&

3、lt;div</div<div</div<div</div<div</div</div</div<divclass=element<divclass=loading3<div</div<div</div<div</div<div</div<div</div</div.专业.专注..word可编辑.</div</divstep2.css现在，最有趣的一步，我会给你风格各

4、加载的元素。欢迎来检查的第一个样式：代码如下:　　.loading1{height:100px;position:relative;width:80px;}.loading1div{background-color:#ffffff;height:30px;position:absolute;width:12px;/*css3radius*/-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;/*css3transform-sca

5、le*/-webkit-transform:scale(0.4);-moz-.专业.专注..word可编辑.transform:scale(0.4);-o-transform:scale(0.4);/*css3animation*/-webkit-animation-name:loading1;-webkit-animation-duration:1.04s;-webkit-animation-iteration-count:infinite;-webkit-animation-direction:linea

6、r;-moz-animation-name:loading1;-moz-animation-duration:1.04s;-moz-animation-iteration-count:infinite;-moz-animation-direction:linear;-o-animation-name:loading1;-o-animation-duration:1.04s;-o-animation-iteration-count:infinite;-o-animation-direction:linear;}

7、.loading1div:nth-child(1){left:0;top:36px;/*css3transform-rotate*/-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);.专业.专注..word可编辑.-o-transform:rotate(-90deg);/*css3animation*/-webkit-animation-delay:0.39s;-moz-animation-delay:0.39s;-o-animati

8、on-delay:0.39s;}.loading1div:nth-child(2){left:10px;top:13px;/*css3transform-rotate*/-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);/*css3animation*/-webkit-