css3动画效果

图片旋转效果



<div class="circular">
<div class="round"></div>
</div>
<div class="text">
<p>loading</p>
</div>
.circular{
border: 2px solid #ccc;
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
top: 185px;
left: 902px;
border-left-color: #000000;
border-top-color: #000000;
-webkit-animation:circle 1s infinite linear;
}
@-webkit-keyframes circle{

0%{ transform:rotate(0deg); }

100%{ transform:rotate(-360deg); }
}
.text p {
position: absolute;
top: 229px;
left: 927px;
}
图片放大 缩小效果



<div class="music">
<div class="music1"></div>
<div class="music2"></div>
<div class="music3"></div>
<div class="music4"></div>
<div class="music5"></div>
</div>
.music{
width: 500px;
margin-top: 500px;
margin-left: 100px;
}
.music1{
display:inline-block;
width: 7px;
height: 35px;
background: #000000;
-webkit-animation:music 1s linear 0.2s infinite;
}
.music2{
display:inline-block;
width: 7px;
height: 35px;
background: #000000;
-webkit-animation:music 1s linear 0.4s infinite;
}
.music3{
display:inline-block;

width: 7px;
height: 35px;
background: #000000;
-webkit-animation:music 1s linear 0.8s infinite;
}
.music4{
display:inline-block;
width: 7px;
height: 50px;
background: #000000;
-webkit-animation:music 1s linear 1s infinite;
}
.music5{
display:inline-block;

width: 7px;
height: 50px;
background: #000000;
-webkit-animation:music 1s linear 1.2s infinite;
}
@keyframes music {
from{
transform: scale(0.1);
}
to{
transform: scale(0.3);
}
}

图片平移



<div class="photo">
     <div class="photo1"></div>
    <div class="photo2"></div>
    <div class="photo3"></div>
    <div class="photo4"></div>
    <div class="photo5"></div>
</div>

.photo{
position: relative
}
.photo1{
display: inline-block;
background-image: url(../images/iconlist_1.png)
width: 173px;
height: 173px;
background-position: left;
animation: photo1 1s linear 1;
position: absolute;
left: 10px;
}
.photo2{
display: inline-block;
background-image: url(../images/iconlist_1.png);
width: 173px;
height: 173px;
background-position: -174px -1px;
animation: photo2 3s linear 1;
}
.photo3{
display: inline-block;
background-image: url(../images/iconlist_1.png);
width: 173px;
height: 173px;
background-position: -348px 0px;
animation: photo3 6s linear 1;
position: absolute;
left: 10px;
}
.photo4{
display: inline-block;
background-image: url(../images/iconlist_1.png);
width: 173px;
height: 173px;
background-position: -522px 0px;
animation: photo4 9s linear 1;
position: absolute;
left: 10px;
}
.photo5{
display: inline-block;
background-image: url(../images/iconlist_1.png);
width: 173px;
height: 173px;
background-position: -696px 0px;
animation: photo5 12s linear 1;
position: absolute;
left: 10px;
}
@keyframes photo1 {
from {
transform: translate(0px);
}
to {
transform: translate(150px);
}
}
@keyframes photo2 {
from {
transform: translate(0px);
}
to {
transform: translate(300px);
}
}
@keyframes photo3 {
from {
transform: translate(0px);
}
to {
transform: translate(450px);
}
}
@keyframes photo4 {
from {
transform: translate(0px);
}
to {
transform: translate(600px);
}
}
@keyframes photo5 {
from {
transform: translate(0px);
}
to {
transform: translate(750px);
}
}