實例教程純CSS3打造非常炫的加載動畫效果

發(fā)布時間：2014-11-05 14:26:31 作者：佚名

我要評論

這篇文章主要為大家介紹了一款非常炫的加載圖，代碼非常簡單。沒有用任何javascript代碼。純css3實現(xiàn)。用在需要一定時間加載的地方非常合適，感興趣的可以來復(fù)制代碼學習哦

　　純css3打造的一款非常炫的加載圖。用在需要一定時間加載的地方非常合適。代碼非常簡單。沒有用任何javascript代碼。純css3實現(xiàn)。先上效果圖：

　　實現(xiàn)代碼如下：

　　html代碼：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

<div class="content">
<div style="width: 970px; margin: auto">
</div>
<div class="rotate">
<span class="triangle base"></span><span class="triangle no1"></span><span class="triangle no2">
</span><span class="triangle no3"></span>
</div>
</div>

　　CSS代碼：

CSS Code復(fù)制內(nèi)容到剪貼板

body {
padding:0;
margin:0;
background-color: #2a4e66;
overflow: hidden;
}
.content {
width:100%;
height:100%;
top:0;
rightright:0;
bottombottom:0;
left:0;
position:absolute;
}
.rotate {
position: absolute;
top: 50%;
left: 50%;
margin: -93px 0 0 -93px;
background: transparent;
width: 186px;
height: 186px;
border-radius: 50%;
z-index: 20;
}
.rotate:after {
content: '';
position: absolute;
box-shadow: 0 0 30px #ffffff, 0 0 10px #ffffff, 0 0 2px #ffffff, inset 0 0 2px #ffffff, inset 0 0 4px #ffffff;
width: 186px;
height: 186px;
border-radius: 50%;
z-index: 10;
}
span.triangle.base {
position: absolute;
width: 0;
height: 0;
margin: 46px 0 0 13px;
border-left: 80px solid transparent;
border-right: 80px solid transparent;
border-top: 140px solid #eeeeee;
transform-origin: 50% 50%;
z-index: 20;
}
span.triangle.no1 {
position: absolute;
margin: 46px 0 0 13px;
width: 0;
height: 0;
border-left: 80px solid transparent;
border-right: 80px solid transparent;
border-bottom: 140px solid #eeeeee;
transform-origin: 0 100%;
z-index: 20;
}
span.triangle.no2 {
position: absolute;
margin: 46px 0 0 13px;
width: 0;
height: 0;
border-left: 80px solid transparent;
border-right: 80px solid transparent;
border-bottom: 140px solid #eeeeee;
transform-origin: 100% 100%;
z-index: 20;
}
span.triangle.no3 {
position: absolute;
margin: 46px 0 0 13px;
width: 0;
height: 0;
border-left: 80px solid transparent;
border-right: 80px solid transparent;
border-bottom: 140px solid #eeeeee;
transform-origin: 50% 100%;
z-index: 20;
}
/* Animation */
.rotate {
-webkit-animation: rotateTriangle 3s linear infinite;
animation: rotateTriangle 3s linear infinite;
}
@-webkit-keyframes rotateTriangle {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(60deg); }
}
@keyframes rotateTriangle {
from { transform: rotate(0deg); }
to { transform: rotate(60deg); }
}
.rotate:after {
-webkit-animation: glowAnimation 3s ease infinite;
animation: glowAnimation 3s ease infinite;
}
@-webkit-keyframes glowAnimation {
0% { box-shadow: 0 0 30px #ffffff, 0 0 10px #ffffff, 0 0 2px #ffffff, inset 0 0 2px #ffffff, inset 0 0 4px #ffffff; }
10% { box-shadow: 0 0 80px #ffffff, 0 0 20px #ffffff, 0 0 2px #ffffff, inset 0 0 4px #ffffff, inset 0 0 8px #ffffff; }
100% { box-shadow: 0 0 30px #ffffff, 0 0 10px #ffffff, 0 0 2px #ffffff, inset 0 0 2px #ffffff, inset 0 0 4px #ffffff; }
}
@keyframes glowAnimation {
0% { box-shadow: 0 0 30px #ffffff, 0 0 10px #ffffff, 0 0 2px #ffffff, inset 0 0 2px #ffffff, inset 0 0 4px #ffffff; }
10% { box-shadow: 0 0 80px #ffffff, 0 0 20px #ffffff, 0 0 2px #ffffff, inset 0 0 4px #ffffff, inset 0 0 8px #ffffff; }
100% { box-shadow: 0 0 30px #ffffff, 0 0 10px #ffffff, 0 0 2px #ffffff, inset 0 0 2px #ffffff, inset 0 0 4px #ffffff; }
}
span.triangle.base {
-webkit-animation: scaleTriangleBase 3s linear infinite;
animation: scaleTriangleBase 3s linear infinite;
}
@-webkit-keyframes scaleTriangleBase {
from { -webkit-transform: translate(0px,-11px) scale(0.5); }
to { -webkit-transform: translate(0px,0px) scale(1); }
}
@keyframes scaleTriangleBase {
from { transform: translate(0px,-11px) scale(0.5); }
to { transform: translate(0px,0px) scale(1); }
}
span.triangle.no1 {
-webkit-animation: scaleTriangleOne 3s linear infinite;
animation: scaleTriangleOne 3s linear infinite;
}
@-webkit-keyframes scaleTriangleOne {
from { -webkit-transform: translate(0px,-46px) scale(0.5); }
to { -webkit-transform: translate(-80px,0px) scale(0); }
}
@keyframes scaleTriangleOne {
from { transform: translate(0px,-46px) scale(0.5); }
to { transform: translate(-80px,0px) scale(0); }
}
span.triangle.no2 {
-webkit-animation: scaleTriangleTwo 3s linear infinite;
animation: scaleTriangleTwo 3s linear infinite;
}
@-webkit-keyframes scaleTriangleTwo {
from { -webkit-transform: translate(0px,-46px) scale(0.5); }
to { -webkit-transform: translate(80px,0px) scale(0); }
}
@keyframes scaleTriangleTwo {
from { transform: translate(0px,-46px) scale(0.5); }
to { transform: translate(80px,0px) scale(0); }
}
span.triangle.no3 {
-webkit-animation: scaleTriangleThree 3s linear infinite;
animation: scaleTriangleThree 3s linear infinite;
}
@-webkit-keyframes scaleTriangleThree {
from { -webkit-transform: translate(0px,-116px) scale(0.5); }
to { -webkit-transform: translate(0px,-280px) scale(0); }
}
@keyframes scaleTriangleThree {
from { transform: translate(0px,-116px) scale(0.5); }
to { transform: translate(0px,-280px) scale(0); }
}