css有个执行简单动画的写法，比如animation。
我给你个例子：
#head-pic,#head-pic2{
width:145pxheight:145pxposition:absolute
top:200px
left:68px
z-index:2
border-radius:100px
-webkit-border-radius:100px
-moz-border-radius:100px
border:3px solid #fff
}
/*为浏览器兼容设置*/
@keyframes headpic-slider{
from{background:url(../images/head-pic.jpg)opacity:1.0}
to{background:url(../images/head-pic.jpg)opacity:0}
}
@keyframes headpic-slider2{
from{background:url(../images/head-pic2.jpg)opacity:0}
to{background:url(../images/head-pic2.jpg)opacity:1.0}
}
@-moz-keyframes headpic-slider{
from{background:url(../images/head-pic.jpg)opacity:1.0}
to{background:url(../images/head-pic.jpg)opacity:0}
}
@-moz-keyframes headpic-slider2{
from{background:url(../images/head-pic2.jpg)opacity:0}
to{background:url(../images/head-pic.jpg)opacity:1.0}
}
@-webkit-keyframes headpic-slider{
from{background:url(../images/head-pic.jpg)opacity:1.0}
to{background:url(../images/head-pic.jpg)opacity:0}
}
@-webkit-keyframes headpic-slider2{
from{background:url(../images/head-pic2.jpg)opacity:0}
to{background:url(../images/head-pic2.jpg)opacity:1.0}
}
@-o-keyframes headpic-slider{
from{background:url(../images/head-pic.jpg)opacity:1.0}
to{background:url(../images/head-pic.jpg)opacity:0}
}
@-o-keyframes headpic-slider2{
from{background:url(../images/head-pic2.jpg)opacity:0}
to{background:url(../images/head-pic2.jpg)opacity:1.0}
}
#head-pic{
animation:headpic-slider 20s linear infinite
-moz-animation:headpic-slider 20s linear infinite
-webkit-animation:headpic-slider 20s linear infinite
}
#head-pic2{
animation:headpic-slider2 20s linear infinite
-moz-animation:headpic-slider2 20s linear infinite
-webkit-animation:headpic-slider2 20s linear infinite
}
需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的<style>标签中，输入css代码：
div{height: 80pxbackground: url(small3.png)}div:hover{background: url(small2.png)}。
3、浏览器运行index.html页面，此时div显示的背景图片是small3.png。
4、将鼠标移入div，此时背景图片自动变更成了small2.png。
