动画展示

标签：round   scale   tran   图标   nim   for   radius   color   margin   

<!-- 网易云音乐图标 -->
<div class="music">
     <div class="m1"></div>
    <div class="m2"></div>
    <div class="m3"></div>
    <div class="m4"></div>
     <div class="m5"></div>
</div>
<!-- 网易云音乐图标 -->

/*网易云*/

.m1{

width: 6px;
height: 60px;
background-color:#000;
position: relative;
left: 10px;
animation:wangyi 1s 2S infinite;
}
.m2{
width: 6px;
height: 60px;
background-color:#ccc;
position: absolute;
top:9px;
left: 40px;
animation:wangyi 1s 0.2S infinite;
}
.m3{
width: 6px;
height: 60px;
background-color:#555;
position: absolute;
top:9px;
left: 60px;
animation:wangyi 1s 0.4S infinite;
}
.m4{
width: 6px;
height: 60px;
background-color:#333;
position: absolute;
top:9px;
left: 80px;
animation:wangyi 1s 0.6S infinite;
}
.m5{
width: 6px;
height: 60px;
background-color:#963;
position: absolute;
top:11px;
left: 100px;
animation:wangyi 1s 0.8S infinite;
}
@keyframes wangyi{
from{
transform:scale(0.1);
}
to{
transform: scale(0.8);
}
}
/*网易云*/

<!-- 圆 -->
<div class="circle">
    <div class="c1"></div>
    <p>Loading</p>
</div>
<!-- 圆 -->

/*圆*/
.circle{
width: 300px;
height: 300px;
margin-top:150px;
position: relative;
}
.circle p{
position: absolute;
left: 72px;
top: 76px;
}
.c1{
width: 200px;
height: 200px;
border:5px solid #ccc;
border-top-color:#FEED09;
border-left-color: #FEED09;
border-radius: 50%;
animation:loading 8s linear infinite;
}
@keyframes loading{
from{
transform:rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
/*圆*/

<!-- 360 -->
<div class="icon">
  <ul>
        <li class="icon1"></li>
        <li class="icon2"></li>
        <li class="icon3"></li>
        <li class="icon4"></li>
        <li class="icon5"></li>
   </ul>
</div>
<!-- 360 -->

.icon{
position: relative;
}
.icon li{
width:175px;
height:175px;
list-style: none;
left: 10px;
display: inline-block;
position: absolute;
}
.icon1{
background: url(../images/iconlist_1.png) no-repeat;
background-position:1px;
animation: icon1 10s linear 1;
}
.icon2{
background: url(../images/iconlist_1.png) no-repeat;
background-position: -173px;
animation: icon2 10s linear 1;
}
.icon3{
background: url(../images/iconlist_1.png) no-repeat;
background-position: -347px;
animation: icon3 10s linear 1;
}
.icon4{
background: url(../images/iconlist_1.png) no-repeat;
background-position: -521px;
animation: icon4 10s linear 1;
}
.icon5{
background: url(../images/iconlist_1.png) no-repeat;
background-position: -695px;
animation: icon5 10s linear 1;
}
@keyframes icon1{
from{
transform:translate(0px);
}
to{
transform:translate(200px);
}
}
@keyframes icon2{
from{
transform:translate(0px);
}
to{
transform:translate(400px);
}
}
@keyframes icon3{
from{
transform:translate(0px);
}
to{
transform:translate(600px);
}
}
@keyframes icon4{
from{
transform:translate(0px);
}
to{
transform:translate(800px);
}
}
@keyframes icon5{
from{
transform:translate(0px);
}
to{
transform:translate(1000px);
}
}

动画展示

标签：round   scale   tran   图标   nim   for   radius   color   margin   

原文地址：http://www.cnblogs.com/weihaha0303/p/7857676.html