<style>
.gaguang{width:300pxtext-align:center}
.box{width: 300px
height: 100px
background: #3B4C2C
border: 4px solid white
box-shadow: 0 0 10px #333
border-radius: 10px
opacity: 0.8}
.gg{width: 400px
height: 200px
border-radius: 45%
margin-top: -265px
z-index: 1
background: white
opacity: 0.1
margin-left: -45px}
.wz{z-index:0position:absolutetop:40pxcolor:#fffwidth:300px}
</style>
<div class="gaguang">
<div class="box"></div>
<div class="wz">这里是内容,这里是内容,</div>
<div class="gg"></div>
</div>
自动移动，目前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>
