使用CSS3实现超酷幻灯图片效果.docVIP

使用CSS3实现的超酷幻灯图片效果 这个教程将介绍如何使用纯CSS创建一个干净的幻灯图片面板。主要想法是在面板中使用背景图片，然后在点击标签后使之动画。 HTML标签 HTML主要包括了3个主要部分：radio按钮和标签，容器，及其标题，如下： section class=cr-container !-- radio buttons and labels -- input id=select-img-1 name=radio-set-1 type=radio class=cr-selector-img-1 checked/ label for=select-img-1 class=cr-label-img-11/label input id=select-img-2 name=radio-set-1 type=radio class=cr-selector-img-2 / label for=select-img-2 class=cr-label-img-22/label input id=select-img-3 name=radio-set-1 type=radio class=cr-selector-img-3 / label for=select-img-3 class=cr-label-img-33/label input id=select-img-4 name=radio-set-1 type=radio class=cr-selector-img-4 / label for=select-img-4 class=cr-label-img-44/label div class=clr/div !-- panels -- div class=cr-bgimg div spanSlice 1 - Image 1/span spanSlice 1 - Image 2/span spanSlice 1 - Image 3/span spanSlice 1 - Image 4/span /div div spanSlice 2 - Image 1/span spanSlice 2 - Image 2/span spanSlice 2 - Image 3/span spanSlice 2 - Image 4/span /div div spanSlice 3 - Image 1/span spanSlice 3 - Image 2/span spanSlice 3 - Image 3/span spanSlice 3 - Image 4/span /div div spanSlice 4 - Image 1/span spanSlice 4 - Image 2/span spanSlice 4 - Image 3/span spanSlice 4 - Image 4/span /div /div !-- titles -- div class=cr-titles h3 spanSerendipity/span spanWhat youve been dreaming of/span /h3 h3 spanAdventure/span spanWhere the fun begins/span /h3 h3 spanNature/span spanUnforgettable eperiences/span /h3 h3 spanSerenity/span spanWhen silence touches nature/span /h3 /div /section CSS样式 主要的目地是先通过label来隐藏radio按钮。点击label后将会使得分开的checkbox或者radio按钮选择。给input一个ID，我们可以使用for=idref属性。 第二我们希望将所有的背景图片放置正确，第三，我们希望点击label的时候显示分开的图片切割线和标题。 首先，我们设计section样式，并且给与一个白色边框及其box阴影 .cr-container{ width: 600px; height: 400px; position:relative; margin: 0 auto; border: 20px solid #fff; box-shadow: 1px 1px 3px rgba(0,0,0,0.1);} 因为我们使用一般的sibling selector来取得正确的图片块和标题，我们需要在容器前放置label。我们需要确认他们处于层次的顶端（z-index），并且通过添加一个top maring来将位置拉低 .cr-container label{ font-style:italic; width:150px; heigh