使用html5+css3来实现slider切换效果告别javascript+css

:nth-child(5) .info{
opacity: 1;
transition: all 0.6s ease-out 1s;
-webkit-transition: all 0.6s ease-out 1s;
}
#slider1:checked ~ #sliders .inner{
margin-left: 0;
}
#slider2:checked ~ #sliders .inner{
margin-left: -100%;
}
#slider3:checked ~ #sliders .inner{
margin-left: -200%;
}
#slider4:checked ~ #sliders .inner{
margin-left: -300%;
}
#slider5:checked ~ #sliders .inner{
margin-left: -400%;
}

好吧，我承认上面的css代码真的比较多，比较复杂，可是它真的实现了非常炫的效果，而且我写完的时候也被css3的巨大魔力折服了。。。
这里面前半部分的代码主要用来设计slider的结构，包括一些圆角、阴影方面的美化设计。后半部分主要是一些动画效果，来实现一些切换图片或者是控制按钮切换时候的动态效果。但是，最主要的是最下面的css3选择器的使用，通过它真正实现了图片切换的功能。我真的认为选择器在示例里起到了非常非常重要的作用，因为这是我过去学习css3所忽略的知识。一直觉得css3强大的是圆角、阴影，是变形、动画，但是这段代码真的告诉我们选择器在css3中有多么重要。在一些复杂的逻辑中，使用这些css3选择器可以实现令人无法想象的效果。
四、slider实现的原理
第一次看完上面的代码的时候，你肯定跟我当初一样，不相信这样的代码可以实现slider的效果。
好吧，我来分析下实现的原理吧。
我在上文中说过，最上面的那个radio组很重要，是slider实现的枢纽。没错，它真的是。
要实现一个slider，无非要实现两种切换，就是点击控制按钮的时候，图片切换；同时，图片切换的时候，保证所有的控制按钮正确显示。
本例中我们使用label来作为控制按钮，article包含图片，而inner作为图片的容器。
简单的想，label和article怎么也建立不起来联系，label的状态信息很难反映到article的选择上去。除非有个东西可以把label的切换状态记录下来，然后通过某种手段来选择相应次序的图片来显示。
好吧，现在，你明白了为什么那个radio组是实现slider的关键了吧。对，它的出现就是为了记录label的点击状态。
我们通过label的for属性将它与对应的radio对应起来，当label点击的时候，相应的radio就变为了checked的状态。然后通过强大的css3选择器将inner向左移动，让对应的图片显示出来。当然，对应的左右选择按钮也是通过选择器来显示的。同样的道理，左右按钮点击时，下方5个选择按钮的状态也是这样实现的。
上面的实现原理比较简单吧，其实只要可以记录下控制按钮的点击状态，通过选择器就可以实现slider的效果。
不仅仅只有radio组可以，a:hover也可以按照这样的思路来实现a在hover的时候实现图片切换。当然还有其他多种实现方式，只要你明白实现的原理。
五、总结
其实css3真的很好玩，很多效果，在css3中，只有想不到，没有做不到。有时候真的发现，写css3是需要一点点小聪明的，有时候一些精妙的实现方式真的让人赞不绝口。
好吧，作为一个小实践，这个示例给我的收获还是很多的，尤其是强大的选择器，让我汗颜了，过去太忽视了。。。
不连续图片切换的问题，我还要考虑考虑，看来必须要使用一点js来辅助了。
好吧，有结果了再分享出来。