自动移动，目前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的transition、@keyframes、animation等，css要鼠标移上去后改变状态只能用:hover伪类，暂停动画可以用设置animation-play-state:paused，继续动画是animation-play-state:running （可能需要设置添加-webkit-等私有前缀）其实动画还是推荐jq，实现起来还是挺方便的，而且不用担心浏览器兼容性。
给你写个例子：
<!DOCTYPE html><html>
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=UTF-8" />
<title>动画暂停</title>
<style type="text/css">
@keyframes move
{
from {
transform: rotate(0deg)
left: 0
}
to {
transform: rotate(360deg)
left: 600px
}
}
@-webkit-keyframes move
{
from {
-webkit-transform: rotate(0deg)
left: 0
}
to {
-webkit-transform: rotate(360deg)
left: 600px
}
}
@-zos-keyframes move
{
from {
-zos-transform: rotate(0deg)
left: 0
}
to {
-zos-transform: rotate(360deg)
left: 600px
}
}
@-o-keyframes move
{
from {
-o-transform: rotate(0deg)
left: 0
}
to {
-o-transform: rotate(360deg)
left: 600px
}
}
.box {
animation: move 3s alternate infinite
-webkit-animation: move 3s alternate infinite /* Safari 和 Chrome */
-moz-animation: move 3s alternate infinite /* Firefox */
-o-animation: move 3s alternate infinite /* Opera */
position: absolute
background-color: yellow
width: 100px
height: 100px
}
.box:hover {
-webkit-animation-play-state: paused
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
