链接：http://www.zhihu.com/question/20018850/answer/17117373
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
用纯粹的 CSS 实现 Carousel 或是 Slideshow，需要对一些 CSS 属性进行逻辑组合。
例如使用 E:checked，E:target 这些伪类选择器触发激活交互，再结合 transform（变形 ）、visibility（可见度）、opacity（不透明度）、position（定位）等属性实现交互反馈，最后添加 transition（过渡动画）属性可得到更佳的交互体验。如果不希望用户反馈式的交互，也可以直接定义 @keyframes 以便使用 animation（动画）属性实现自动播放。
我在 2011 年做过这类纯样式表动态组件的尝试并在 Codrops 做出演示和讲解，下面的链接是我发表过的相关文章，内涵源代码（纯 CSS）和演示：
Fluid CSS3 Slideshow with Parallax Effect（拥有视差效果的流式布局 Slideshow）
Image Accordion with CSS3（使用 Responsive 响应式设计的手风琴式 Slideshow）
Smashing 上也有一篇技术文章，作者 Alessio Atzeni 使用纯 CSS 编写出了可自动循环播放的 Slideshow：
A Pure CSS3 Cycling Slideshow
鉴于当下浏览器兼容的问题，不建议在面向用户的网站项目中使用这种实验性质的 Carousel 和 Slideshow。
