<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<div class="boxMove">
<div class="rect con-1"></div>
<div class="rect con-2"></div>
<div class="rect con-3"></div>
<div class="rect con-4"></div>
<div class="rect con-5"></div>
</div>
<div class="music">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>
</div>
<div class="loading">
</div>
<div class="font">loading</div>
</body>
</html>
css属性
@keyframes con-1{
from{
transform: translate(0px);
}
to{
transform: translate(310px);
}
}
@keyframes con-2{
from{
transform: translate(-150px);
}
to{
transform: translate(280px);
}
}
@keyframes con-3{
from{
transform: translate(-300px);
}
to{
transform: translate(260px);
}
}
@keyframes con-4{
from{
transform: translate(-450px);
}
to{
transform: translate(230px);
}
}
@keyframes con-5{
from{
transform: translate(-600px);
}
to{
transform: translate(210px);
}
}
.rect{
width: 173px;
height: 173px;
background:url(../images/iconlist_1.png) no-repeat;
display: inline-block;
}
.con-1{
width: 173px;
animation: con-1 2s ease-in-out 5;
}
.con-2{
background-position: -174px;
width: 173px;
animation: con-2 2s ease-in-out 5;
}
.con-3{
background-position: -348px;
width: 173px;
animation: con-3 2s ease-in-out 5;
}
.con-4{
background-position: -522px;
width: 173px;
animation: con-4 2s ease-in-out 5;
}
.con-5{
background-position: -696px;
width: 173px;
animation: con-5 2s ease-in-out 5;
}
.music{
display: block;
margin-left: 640px;
width: 200px;
height: 200px;
position: relative;
margin-top:-180px;
}
@keyframes one{
from{
transform: scale(1,1);
}
to{
transform: scale(0.8)
}
}
@keyframes two{
from{
transform: scale(1,1);
}
to{
transform: scale(0.8)
}
}
@keyframes three{
from{
transform: scale(1,1);
}
to{
transform: scale(0.8)
}
}
@keyframes four{
from{
transform: scale(1,1);
}
to{
transform: scale(0.8)
}
}
@keyframes five{
from{
transform: scale(1,1);
}
to{
transform: scale(0.8)
}
}
.one{
width: 6px;
height: 60px;
display: inline-block;
background-color: black;
position: absolute;
top:20px;
left: 30px;
animation: one 1s linear 0s infinite;
}
.two{
width: 6px;
height: 50px;
background-color: black;
top:20px;
left: 40px;
position: absolute;
animation: two 1s linear 0s infinite;
}
.three{
width: 6px;
height: 40px;
background-color: black;
top:20px;
left: 50px;
position: absolute;
animation: three 1s linear 0s infinite;
}
.four{
width: 6px;
height: 30px;
background-color: black;
top:20px;
left: 60px;
position: absolute;
animation: four 1s linear 0s infinite;
}
.five{
width: 6px;
height: 20px;
background-color: black;
top:20px;
left: 70px;
position: absolute;
animation: five 1s linear 0s infinite;
}
@keyframes loading{
from{
transform: rotate(0deg);
}to{
transform: rotate(360deg);
}
}
.loading{
width: 173px;
height: 173px;
border-radius: 50%;
margin-left: 640px;
border-left:10px solid green;
border-top:10px solid green;
border-right:10px solid #b6b6b6 ;
border-bottom: 10px solid #b6b6b6;
animation: loading 3s linear 0s infinite;
margin-top: -100px;
}
.font{
margin-left: 700px;
margin-top: -120px;
font-weight: bold;
color: green;
font-size: 24px;
}
原文：http://www.cnblogs.com/zy66blogs/p/7507880.html