一.从一张背景图片中截取六张图并让它们平移。
HTML代码如下:
<div class="pic">
<div class="img1"></div>
<div class="img2"></div>
<div class="img3"></div>
<div class="img4"></div>
</div>
css代码:
.pic{
position:relative;
}
.pic div{
width: 173px;
height: 175px;
display: inline-block;
position: absolute;
top:0;
left:10px;
}
.img1{
background:url(../images/banner.png) no-repeat;
background-position:-522px;
/*position: absolute;*/
animation: animateOne 2s linear 1;
}
.img2{
background:url(../images/banner.png) no-repeat;
background-position:-349px;
display: inline-block;
position:absolute;
animation: animateTwo 4s linear 1;
}
.img3{
background:url(../images/banner.png) no-repeat;
background-position:-174px;
animation: animateThree 6s linear 1;
}
.img4{
background:url(../images/banner.png) no-repeat;
background-position:0px;
display: inline-block;
position: absolute;
animation: animateFour 8s linear 1;
}
@keyframes animateOne{
from {
transform: translate(0px,0px);
}
to{
transform: translate(100px,0px);
}
}
@keyframes animateTwo{
from {
transform: translate(0px,0px);
}
to{
transform: translate(300px,0px);
}
}
@keyframes animateThree{
from {
transform: translate(0px,0px);
}
to{
transform: translate(500px,0px);
}
}
@keyframes animateFour{
from {
transform: translate(0px,0px);
}
to{
transform: translate(700px,0px);
}
}
二,播放符的编写
Html代码:我们先写六个div
<div class="player">
<div class="playerOne"></div>
<div class="playerTwo"></div>
<div class="playerThree"></div>
<div class="playerFour"></div>
<div class="playerFive"></div>
</div>
css代码:
.player{
width:200px;
height:200px;
margin: auto;
}
.player div{
width:5px;
height:50px;
background-color: #21134D;
display: inline-block;
}
.playerOne{
animation: aniOne 1s linear 0.2s infinite;
}
.playerTwo{
animation: aniOne 1s linear 0.4s infinite;
}
.playerThree{
animation: aniOne 1s linear 0.6s infinite;
}
.playerFour{
animation: aniOne 1s linear 0.8s infinite;
}
.playerFive{
animation: aniOne 1s linear 1s infinite;
}
@keyframes aniOne{
from {
transform:scaleY(0.1);
}
to{
transform:scaleY(0.5);
}
}
先设置动画,然后在五个div中分别调用它。持续时间相同,并且让后面的div延时,这样就可以循序渐进了。
三,loading图不停旋转
html代码:
<div class="loading">
</div>
<div class="font">loading</div>
css代码:
.loading{
width:150px;
height:150px;
border-radius:50%;
border:6px solid transparent;
border-top-color:#F82727;
border-left-color:#F82727;
border-right-color: #3EEA4C;
border-bottom-color: #3EEA4C;
animation: circle 3s linear 0s infinite;
position: absolute;
}
.font{
display: inline-block;
padding-left:60px;
position: absolute;
margin-top:70px;
}
@keyframes circle{
from {
transform:rotate(0deg);
}
to{
transform:rotate(360deg);
}
}
border-top-color:#F82727;
border-left-color:#F82727;
border-right-color: #3EEA4C;
border-bottom-color: #3EEA4C;
圆的两边设不同颜色