html中怎样制作图片滚动,CSS3 制作的图片滚动效果

实现效果

实现代码

html

CSS3

@keyframes slidy {

0% { left: 0%; }

20% { left: 0%; }

25% { left: -100%; }

45% { left: -100%; }

50% { left: -200%; }

70% { left: -200%; }

75% { left: -300%; }

95% { left: -300%; }

100% { left: -400%; }

}

body { margin: 0; }

div#slider { overflow: hidden; }

div#slider figure img { width: 20%; float: left; }

div#slider figure {

position: relative;

width: 500%;

margin: 0;

left: 0;

text-align: left;

font-size: 0;

animation: 5s slidy infinite;

}

其他

对切换速度有要求的修改CSS3最后的时间即可

以上就是CSS3 制作的图片滚动效果的详细内容，更多关于CSS3 图片滚动的资料请关注脚本之家其它相关文章！