实现效果

实现代码

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 图片滚动的资料请关注本站其它相关文章！