html5 css页面切换效果,使用html5css3来实现slider切换效果告别javascriptcss.pdf

提到 slider ，过去一直都是用 css+js 来配合实现相关的切换效果。听过大家一直讨论使

用 html5+css3 的实现方式，自己却一直没有动手实现过。好吧，这次我有时间来玩下 css3

了,感兴趣的朋友可以了解下

开始进入正题，提到 slider ，过去一直都是用 css+js 来配合实现相关的切换效果。听过

大家一直讨论使用 html5+css3 的实现方式，自己却一直没有动手实现过。好吧，这次我有

时间来玩下 css3 了。其实，我也是被微博上的一条消息给吸引过来的，看到别人实现的效

果很赞，然后自己就有了动手做一把的冲动。

一、效果图

跟过去用 js 来实现的效果看上去差不了太多，但是整体感觉很优雅。好吧， css3 的强

大之处在于， 我写了很少的代码， 就实现了比较复杂的效果。 但是这个示例也有不太完美的

地方，就是在两张图片切换的时候，如果中间间隔有图片，那么在 css3 动画的执行过程中

还是会看到，比较不给力。不过想想，这可是纯 css3 来实现的效果啊，用 js 来实现的复杂

的 html 结构变动在这里可看不到，所以上面的效果很难简单用 css3 来实现。

二、 html 结构

代码如下 :

Title1

Description1

Title2

Description2

Title3

Description3