请选择 进入手机版 | 继续访问电脑版
首页 /web前端 / 正文

纯CSS实现的无侵入的卡盘(幻灯片)

2021-02-28| 发布者: King柒羽| 查看: 812

卡盘,也就是幻灯片,它应该是自动播放,但目前css是无法做到自动播放(可能会让你失望),所以它不应该叫幻灯片,但我扔这么称呼它为幻灯片。如果你认为可以用脚本来实现,嗯,地球人都知道,显然违背了我们的主题

卡盘,也就是幻灯片,它应该是自动播放,但目前css是无法做到自动播放(可能会让你失望),所以它不应该叫幻灯片,但我扔这么称呼它为幻灯片。如果你认为可以用脚本来实现,嗯,地球人都知道,显然违背了我们的主题,纯css的,无侵入的。似乎我标题党了,但请你耐下性子来听我说。
今天无意在经典论坛看到一个帖子,纯CSS的图片展示效果,它是利用锚点来实现,创意非常好,但马上令我兴奋,因为该效果有缺点。
Opera无效
无法记录状态
没有hover效果
这些正是我想说的,我想补充的。
首先,我们让它来兼容所有A级浏览器。其实原理很简单,既然使用锚点,我们应该记得css3有个伪类:target(非IE内核浏览器都支持),让它来控制,不就更好?














  1. a

  2. b

  3. c



测试地址
问题2,实现记录状态,那我们同样可以用伪类:target来实现,IE系列浏览器不支持。


测试地址
最后一个问题,hover效果,这可不是简单的:hover就可以实现,我们不能在li上给hover(这样当鼠标经过li就hover了),我们只能在数字上hover(1)然后来影响它对于的图片,貌似不可能纯CSS实现,但确实可以实现,用“ + ”来实现。由于用到:target和“+”,所以只有Firefox、Opera支持。-__-


最终演示,代码实现是很简单,关键是是否联想到原理。举一反三,将会得到更多你想要的结果。不知不觉已是国庆节了,祝大家节日快乐!

提示:您可以先修改部分代码再运行
来源:www.guadou.net 如有侵权,请联系QQ:199993150
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!

0人已打赏

0条评论 812人参与 网友评论 文明发言,请先登录注册

文明上网理性发言,请遵守国家法律法规。

最新评论

相关推荐
©2001-2018 瓜豆网 https://www.guadou.net/中国互联网举报中心非经营性网站公安网备