js 可以做动画，但是需要写很多代码；其实css也是可以做动画的，而且比js写的代码还少，理解也相对简单。
这里用到css3 的animation 属性，它配合着 @keyframes 规则来使用，可以得到较好的效果
使用方法：
animation : name duration timing-function delay interation-count direction
@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。
例如：
@keyframes mydonghua{
from{background:red;}
to{background:yellow;}
}
这表示动画 mydonghua 的初始值background的值为red,最终值是 background:yellow;
浏览器支持状况：
下面做一个动画效果：转动的风车
模式：三张图片围绕中心点（即Z轴）循环转动
html 代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>转动的风车</title>
<link rel="stylesheet" href="css/fengche000.css">
</head>
<body>
<ul>
<li><img src="img/fengche_1.png"></li>
<li><img src="img/fengche_2.png"></li>
<li><img src="img/fengche_3.png"></li>
</ul>
</body>
</html>
css 代码：
* {
margin: 0px;
padding: 0px;
}
ul li {
position: absolute;
left: 20%;
top: 10%;
width: 500px;
height: 500px;
list-style-type: none;
}
ul li img{
position:relative;
display:inline-block;
width:100%;
height:100%;
}
/*nth-of-type(1):选中第一个li*/
ul li:nth-of-type(1) {
/*animation:动画*/
/*move1: 调用动画move1, 下面keyframes定义的move1*/
/*5s: 在5秒内完成动画move1 里面定义的动作*/
/*linear: 匀速运动*/
/*infinite: 运动重复无限次*/
animation: move1 5s linear infinite;
}
ul li:nth-of-type(2) {
animation: move2 10s linear infinite;
}
ul li:nth-of-type(3) {
animation: move1 10s linear infinite;
}
@keyframes move1 {
/*
from: 相当于%0 动画的第一个阶段
to: 相当于100% 动画的第二个阶段
*/
from {
/*transform: 变形*/
/*rotateZ: 以y轴为圆心旋转 从0度开始*/
transform: rotateZ(0deg);
}
to {
/*rotateZ: 以y轴为圆心旋转 顺时针运动到360度*/
transform: rotateZ(360deg);
}
}
@keyframes move2 {
from {
transform: rotateZ(0deg);
}
to {
transform: rotateZ(-360deg);
}
}
运行效果：