h3元素包含两个span元素，一个是主标题，一个是它是字幕CSS。为了代码的简洁，文章的CSS中省略了浏览器前缀，但是得到的代码是完整的。我们的第一个目标是在单击标签元素时触发相应的单选按钮。方法很简单，就是将label元素的for属性值和radiobutton的ID值进行匹配。在第二步中，我们需要将所有背景图像放置在正确的位置。第三步，当label标签被点击时，会显示对应的图片切片和标题。让我们一步步来看。首先，设置最外层的section元素的样式，给它加上光影效果。.cr-container{宽度：600px；高度：400px；位置：相对；保证金：0自动；边框：20px实心#fff；box-shadow:1px1px3pxrgba(0,0,0,0.1);}因为后面我们要用一般的兄弟选择器“~”来选择对应的图片切片和标题，所以把所有的label元素放在最上面的代码。通过设置z-index属性确保label元素显示在图像和文本上方，并使用margin-top属性使它们距离整体上边框350px。.cr-容器标签{font-style:italic;宽度：150px；高度：30px；游标：指针；颜色：#fff；行高：32px；字体大小：24px；-顶部：350px；z-index:1000;}接下来，为了给label元素添加一个小圆圈美化，我们创建一个伪元素并将其放置在文本的中心。.cr-containerlabel:before{内容:'';宽度：34px；高度：34px；背景：rgba(130,195,217,0.9)；位置：绝对；左：50%；左边距：-17px；50%；框阴影：0px0px0px4pxrgba(255,255,255,0.3);z-index:-1;}为了在面板之间创建分隔线，我们使用标签元素的另一个伪元素，并通过一个渐变背景将其从图片的上边缘延伸到下边缘。.cr-containerlabel:after{width:1px;高度：400px；内容：'';背景：线性渐变（顶部，rgba（255,255,255,0）0％，rgba（255,255,255,1）100％）;位置：绝对；底部：-20px；right:0px;}最后一个面板的右侧应该没有分隔线，所以我们将其宽度设置为0。.cr-containerlabel.cr-label-img-4:after{width:0px;}现在，样式标签标签完成，我们可以隐藏所有的单选按钮。.cr-containerinput{display:none;}当我们点击标签元素时，它对应的单选按钮被选中。相反，您可以使用通用兄弟选择器来选择与所选按钮对应的标签元素并更改其文本颜色。.cr-containerinput.cr-selector-img-1:checked~label.cr-label-img-1,.cr-containerinput.cr-selector-img-2:checked~label.cr-label-img-2、.cr-containerinput.cr-selector-img-3:勾选~label.cr-label-img-3,.cr-containerinput.cr-selector-img-4:勾选~label.cr-label-img-4{color:#68abc2;}我们还可以改变小圆圈的颜色，加上阴影效果。.cr-containerinput.cr-selector-img-1:checked~label.cr-label-img-1:before,.cr-containerinput.cr-selector-img-2:checked~label.cr-label-img-2:before,.cr-containerinput.cr-selector-img-3:checked~label.cr-label-img-3:before,.cr-containerinput.cr-selector-img-4:checked~label.cr-label-img-4:before{背景：#fff;box-shadow:0px0px0px4pxrgba(104,171,194,0.6);}图片的容器会占据所有的宽度，绝对定位。稍后使用此容器将背景图像设置为当前选定的图像。我们还需要一个默认可见的图像，因此添加一些背景属性：.cr-bgimg{width:600px;高度：400px；位置：绝对；左：0px；顶部：0px；z-索引：1；背景-重复：不重复；背景位置：00；}因为我们有四个面板，每个面板的宽度为150像素（600除以4）。面板设置为向左浮动后，它们将并排显示。同时设置它们溢出隐藏，因为我们不想在滑动的时候看到切片：.cr-bgimgdiv{width:150px;高度：100%；位置：相对；向左飘浮;溢出：隐藏；background-repeat:no-repeat;}每个切片也设置为绝对定位，left:-150px会在面板外显示并隐藏：.cr-bgimgdivspan{position:absolute;宽度：100%；高度：100%；顶部：0px；左：-150px；z-指数：2；text-indent:-9000px;}接下来我们来处理容器和每个切片的背景图片：.cr-containerinput.cr-selector-img-1:checked~.cr-bgimg,.cr-bgimgdivspan:nth-child(1){background-image:url(../images/1.jpg);}.cr-containerinput.cr-selector-img-2:checked~.cr-bgimg,.cr-bgimgdivspan:nth-child(2){background-image:url(../images/2.jpg);}.cr-containerinput.cr-selector-img-3:checked~.cr-bgimg,.cr-bgimgdivspan:nth-child(3){background-image:url(../images/3.jpg);}.cr-containerinput.cr-selector-img-4:checked~.cr-bgimg,.cr-bgimgdivspan:nth-child(4){background-image:url(../images/4.jpg);}我们还需要根据不同的panel为切片提供不同的背景图定位：.cr-bgimgdiv:nth-child(1)span{background-position:0px0px;}.cr-bgimgdiv:nth-child(2)span{background-position:-150px0px;}.cr-bgimgdiv:nth-child(3)span{background-position:-300px0px;}.cr-bgimgdiv:nth-child(4)span{background-position:-450px0px;}当我们点击标签时，我们将所有切片向右滑动：.cr-containerinput:checked~.cr-bgimgdivspan{animation:slideOut0.6sease-in-out;}@keyframesslideOut{0%{left:0px;}100%{左：150px；但是除了我们选择的label，它对应的图片切片从-150px滑动到0px：.cr-containerinput.cr-selector-img-1:checked~.cr-bgimgdivspan:nth-child(1),.cr-containerinput.cr-selector-img-2:checked~.cr-bgimgdivspan:nth-child(2),.cr-containerinput.cr-selector-img-3:checked~.cr-bgimgdivspan:nth-child(3),.cr-containerinput.cr-selector-img-4:checked~.cr-bgimgdivspan:nth-child(4){transition:left0.5sease-in-出去;动画：无；左：0px；z-index:10;}最后在h3标签中设置主副标题的样式，当我们点击label标签后，它对应的标题的透明度会从0过到1：.cr-titlesh3{position:absolute;宽度：100%；文本对齐：居中；顶部：50%；z-索引：10000；不透明度：0；颜色：#fff；文本阴影：1px1px1pxrgba(0,0,0,0.1);过渡：不透明度0.8s缓入缓出；}.cr-titlesh3span:nth-child(1){font-family:'BebasNeueRegular','ArialNarrow',Arial,sans-serif;字体大小：70px；显示：块；字母间距：7px;}.cr-titlesh3span:nth-child(2){字母间距：0px;显示：块；背景：rgba(104,171,194,0.9)；字体大小：14px；填充：10px；字体样式：斜体；字体系列：Cambria、Palatino、“PalatinoLinotype”、“PalatinoLTSTD”、Georgia、serif；}.cr-containerinput.cr-selector-img-1:checked~.cr-titlesh3:nth-child(1),.cr-containerinput.cr-selector-img-2:checked~.cr-titlesh3:nth-child(2),.cr-containerinput.cr-selector-img-3:checked~.cr-标题h3:nth-child(3),.cr-containerinput.cr-selector-img-4:checked~.cr-titlesh3:nth-child(4){opacity:1;}就是这样！切片的轮播效果就是这样实现的。当然，通过这个效果，我们还可以扩展出更多的切片效果，例如：效果2、效果3、效果4。获取上述轮播效果的代码可以是：