动画

一.从一张背景图片中截取六张图并让它们平移。

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;

圆的两边设不同颜色