使用html5+css3来实现slider切换效果告别javascript+css
鉴于大家对XHTML十分关注，我们编辑小组在此为大家搜集整理了“使用html5+css3来实现slider切换效果告别javascript+css”一文，供大家参考学习
好吧，上次说要赶紧的补上几篇文章，结果淡定的失约了。又是近一个月才发一篇，真是让人郁闷。发现最近总是抽不出时间了，基本都是一个项目接一个项目的安排，自己不是在空闲的时候找不到合适的话题，就是在有纠结话题的时候抽不出时间了。所以我决定一段时间内先把自己纠结过的问题先归纳下知识点，等空闲的时候在一个一个深入研究，然后再整理成文章后分享出来。开始进入正题，提到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="/uploadfile/201307/26/59103111499.png"/>
</article>
<article>
<div class="info">
<h1>Title2</h1>
<a href="#">Description2</a>
</div>
<img src="/uploadfile/201307/26/D4103111977.png"/>
</article>
<article>
<div class="info">
<h1>Title3</h1>
<a href="#">Description3</a>
</div>
<img src="/uploadfile/201307/26/96103111205.png"/>
</article>
<article>
<div class="info">
<h1>Title4</h1>
<a href="#">Description4</a>
</div>
<img src="/uploadfile/201307/26/A3103111714.png"/>
</article>
<article>
<div class="info">
<h1>Title5</h1>
<a href="#">Description5</a>
</div>
<img src="/uploadfile/201307/26/C2103111327.png"/>
</article>
</div>
</div>
</div>
<div id="controls">
<label for="slider1"></label>
<label for="slider2"></label>
<label for="slider3"></label>
<label for="slider4"></label>
<label for="slider5"></label>
</div>
<div id="active">
<label for="slider1"></label>
<label for="slider2"></label>
<label for="slider3"></label>
<label for="slider4"></label>
<label for="slider5"></label>
</div>
</div>
上面的代码是主要的html结构，其中包含了一个input radio