应用css3制作loading效果
参考秒味课堂 代码发出来备忘
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> <link rel="stylesheet" href="test.css" type="text/css" /> </head> <body> <div class="loading"> <div class="load"> <div class="layer"></div> <div class="layer2"></div> <div class="text">25%</div> </div> <div class="loadshadow"></div> </div> </body> </html>
css3
body {position: relative;}
@keyframes shadow
{
0%
{
-webkit-transform: scale(0.8); opacity: 0.5;
-moz-transform: scale(0.8); opacity: 0.5;
-ms-transform: scale(0.8); opacity: 0.5;
-o-transform: scale(0.8); opacity: 0.5;
transform: scale(0.8); opacity: 0.5;
}
100%
{
-webkit-transform: scale(1); opacity: 1;
-moz-transform: scale(1); opacity: 1;
-ms-transform: scale(1); opacity: 1;
-o-transform: scale(1); opacity: 1;
transform: scale(1); opacity: 1;
}
}
@keyframes move1
{
0%
{
-webkit-transform: translateY(7px);
-moz-transform: translateY(7px);
-ms-transform: translateY(7px);
-o-transform: translateY(7px);
transform: translateY(7px);
}
100%
{
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
}
@keyframes move2
{
0%
{
transform:rotate(0deg);
}
100%
{
transform: rotate(-360deg);
}
}
@keyframes move3
{
0%
{
transform: rotate(0deg);
}
100%
{
transform: rotate(360deg);
}
}
.loading { width: 120px; height: 140px; position: fixed; left:calc(50% - 60px); top:calc(50% - 70px);}
.load {width: 120px; height: 100px; background: url(./image/loading3.png); position: absolute;left: 0px; top: 0px; -webkit-animation: .5s move1 infinite alternate linear; animation: .5s move1 infinite alternate linear;}
.layer {width:120px; height:100px; background: url(./image/loading4.png) no-repeat; position: absolute; top: 0px; left: 0px; animation: 1.2s move2 infinite linear;}
.layer2 {width: 120px; height: 100px; background: url(./image/loading5.png) no-repeat; position: absolute; top:0px; left: 0px; animation:1.2s move3 infinite linear;}
.text { width: 120px; height: 100px; position: absolute; top: 0px; left: 0px; text-align: center; line-height: 100px; font:bold 16px/100px bold; color:#f9725c;}
.loadshadow{ width: 100px; height: 20px; margin:0 auto; background:-webkit-radial-gradient(contain,rgba(0,0,0,0.7),rgba(0,0,0,0)); position: absolute; left:10px; bottom:0px;-webkit-animation: .5s shadow infinite alternate linear;}
