1. 程式人生 > >動畫展示

動畫展示

p s for color mes ota cal ive sca icon

<!-- 網易雲音樂圖標 -->
<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);
}
}

動畫展示