使用使用html5+css3来实现来实现slider切换效果告别切换效果告别javascript+css
提到slider，过去一直都是用css+js来配合实现相关的切换效果。听过大家一直讨论使用html5+css3的实现方
式，自己却一直没有动手实现过。好吧，这次我有时间来玩下css3了,感兴趣的朋友可以了解下哦
好吧，上次说要赶紧的补上几篇文章，结果淡定的失约了。又是近一个月才发一篇，真是让人郁闷。发现最近总是抽不出时间
了，基本都是一个项目接一个项目的安排，自己不是在空闲的时候找不到合适的话题，就是在有纠结话题的时候抽不出时间
了。所以我决定一段时间内先把自己纠结过的问题先归纳下知识点，等空闲的时候在一个一个深入研究，然后再整理成文章后
分享出来。
开始进入正题，提到slider，过去一直都是用css+js来配合实现相关的切换效果。听过大家一直讨论使用html5+css3的实现方
式，自己却一直没有动手实现过。好吧，这次我有时间来玩下css3了。其实，我也是被微博上的一条消息给吸引过来的，看
到别人实现的效果很赞，然后自己就有了动手做一把的冲动。
一、效果图一、效果图
跟过去用js来实现的效果看上去差不了太多，但是整体感觉很优雅。好吧，css3的强大之处在于，我写了很少的代码，就实现
了比较复杂的效果。但是这个示例也有不太完美的地方，就是在两张图片切换的时候，如果中间间隔有图片，那么在css3动
画的执行过程中还是会看到，比较不给力。不过想想，这可是纯css3来实现的效果啊，用js来实现的复杂的html结构变动在这
里可看不到，所以上面的效果很难简单用css3来实现。
二、二、html结构结构
复制代码
代码如下:
<div id="bd">
<input checked type="radio" name="slider" id="slider1">
<input type="radio" name="slider" id="slider2">
<input type="radio" name="slider" id="slider3">
<input type="radio" name="slider" id="slider4">
<input type="radio" name="slider" id="slider5">
<div id="sliders">
<div id="overflow">
<div class="inner">
<article>
<div class="info">
<h1>Title1</h1>
<a href="#">Description1</a>
</div>
<img src="img/pic1.png"/>
</article>
<article>
<div class="info">
<h1>Title2</h1>
<a href="#">Description2</a>
</div>
<img src="img/pic2.png"/>
</article>
<article>
<div class="info">
<h1>Title3</h1>
资源评论
weixin_38666753
- 粉丝: 7
- 资源: 909
