欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

幻灯片の纯CSS,NO JavaScript_html/css_WEB-ITnose

程序员文章站 2022-05-13 15:16:53
...
之前就遇到有人问,不用js,纯css实现幻灯片。

那么对于使用纯的css + html 怎样来实现幻灯片呢?下面有几种方法可供参考,有些还不成熟。

方案一:利用css3的animation

例子传送门点我,点我!

幻灯片

方案二:把需要展示的图片集合并长一个长横图,然后再通过:hover伪类来改变图片的位置,从而达到幻灯片的效果

例子传送门还是点我吧

1 2 3 4 5 6 7 8 9 10幻灯片の纯CSS,NO JavaScript_html/css_WEB-ITnose

方案三:利用描点。通过点击描点来选择图片,达到幻灯片的效果。

我没有传送门,你们抢吧。