自动移动，目前css3是有这样的效果的，叫做css3动画
给你一个示例
你要注意的一点是目前这个只能支持最低为IE10及以上版本才能够运行的哦
Chrome 和 Safari 需要前缀 -webkit-。
本答案出自“我要编程”软件开发师训练平台免费课程。
<!DOCTYPE html><html>
<head>
<style>
div
{
width:100px
height:100px
background:red
position:relative
animation:myfirst 5s
-moz-animation:myfirst 5s /* Firefox */
-webkit-animation:myfirst 5s /* Safari and Chrome */
-o-animation:myfirst 5s /* Opera */
}
@keyframes myfirst
{
0% {background:red left:0px top:0px}
25% {background:yellow left:200px top:0px}
50% {background:blue left:200px top:200px}
75% {background:green left:0px top:200px}
100% {background:red left:0px top:0px}
}
@-moz-keyframes myfirst /* Firefox */
{
0% {background:red left:0px top:0px}
25% {background:yellow left:200px top:0px}
50% {background:blue left:200px top:200px}
75% {background:green left:0px top:200px}
100% {background:red left:0px top:0px}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red left:0px top:0px}
25% {background:yellow left:200px top:0px}
50% {background:blue left:200px top:200px}
75% {background:green left:0px top:200px}
100% {background:red left:0px top:0px}
}
@-o-keyframes myfirst /* Opera */
{
0% {background:red left:0px top:0px}
25% {background:yellow left:200px top:0px}
50% {background:blue left:200px top:200px}
75% {background:green left:0px top:200px}
100% {background:red left:0px top:0px}
}
</style>
</head>
<body>
<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>
<div></div>
</body>
</html>
刷新网页可不能转哦，一刷新网页就全部重新加载了，但是css3 可以通过多张图片 排在一起 像flash里的单帧播放形式 通过改变background-position来实现图片连续播放。其实现在的css 3D动画都是将多张图片单帧保存下来 然后通过css改变图片或背景位置的。
如下：
<div id="aa"></div>
@-webkit-keyframes 'somename' {
0% { background-position: 0px}
49.9999% { background-position: 0px}
50% { background-position: -100px}
100% { background-position: -100px}
}
#aa{
width:500px
height:500px
display:block
background-image: url(somepic.png)
-webkit-animation-name: somename
-webkit-animation-duration: 0.2s
-webkit-animation-iteration-count: infinite
}
