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

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