css3动画实现小集锦

一、文字波浪跳动

HTML代码：

<li class="di"><a target="zhibo"><span>直</span><span>播</span></a></li>	

css代码：

.di{margin-left: 20px;cursor: pointer;}
.di span{float:left;position: relative;  }  
.di span:nth-child(1){  -webkit-animation:jump 1s linear 0s infinite alternate;}  
.di span:nth-child(2){  -webkit-animation:jump 1s linear 0.2s infinite alternate;}  
.di span:nth-child(3){  -webkit-animation:jump 1s linear 0.4s infinite alternate;}  
.di span:nth-child(4){  -webkit-animation:jump 1s linear 0.6s infinite alternate;}  
.di span:nth-child(5){  -webkit-animation:jump 1s linear 0.8s infinite alternate;} 

二、图片Y轴旋转360°

HTML代码：

<li><a target="zhibo"><img class="Rotation" src="imgaes/zhibo.jpg" width="74px"/></a></li>

css代码：

@-webkit-keyframes rotation {
from {-webkit-transform: rotateY(0deg);}
to { -webkit-transform: rotatey(360deg);}
} 
.Rotation {
-webkit-transform: rotate(360deg);
animation: rotation 8s linear infinite;
-moz-animation: rotation 8s linear infinite;
-webkit-animation: rotation 8s linear infinite;
-o-animation: rotation 8s linear infinite;
}