X
100px的图片合成
100
X
200
的。通过CSS图片定位来达到切换效果。存放在根目录
img\tupian.gif
<style>
#div_1{width:100pxheight:100pxmargin:0padding:0}
定义一个DIV方框
#div_1
ul,li{list-style:nonemargin:0pxpadding:0px}
定义div_1中UL,LI
#div_1
li{float:leftmargin:0}
#div_1
a{
background:url(img/tupian.gif)
no-repeatwidth:100pxheight:100pxdisplay:block
}
定div_1中链接背景样式等
#a1
a:hover,#a1
a:active{
background-position:
0px
-100pxheight:100px
}
定义一个鼠标悬停状态
</style>
在BODY中
<div
id="div_1"><ul>
<li><a
href="#">首页</a></li>
完全可以，用css的重复播放动画的功能实现自动切换。
做了个小例子，你可以看看，基本的思路就这样了，效果还比较不错啦。这个思路还可以用来作为图片滚动播放的例子呢。
body部分代码：
<body>
<div id="box1">
<div id="box2">
<img src="https://www.baidu.com/img/bd_logo1.png">
<img src="https://www.baidu.com/img/bd_logo1.png">
<img src="https://www.baidu.com/img/bd_logo1.png">
<img src="https://www.baidu.com/img/bd_logo1.png">
</div>
</div>
</body>
css的代码：
*{
padding:0
margin:0
}
html,body{
overflow-x:hidden
overflow-y:auto
}
#box1{
position:relative
width:500px
height:450px
margin:0 auto
background:red
overflow:hidden
}
#box2{
float:left
width:2000px
height:450px
animation:box2 2s both linear infinite
-webkit-animation:box2 2s both linear infinite/* Safari and Chrome */
}
#box2:hover {
animation-play-state: paused
}
@keyframes box2
{
from {
margin-left:0
}
to {
margin-left:-1500px
}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {
margin-left:0
}
to {
margin-left:-1500px
}
}
img{
float:left
width:500px
height:450px
}
效果图；
好像时间间隔设置太短了，可以把动画播放的时间延长一点。
