纯CSS实现的无侵入的卡盘（幻灯片）_CSS教程_CSS_网页制作_

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


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


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


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

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！