#Con{width:900px; /*宽度*/ height:500px;/*高度*/ background:#9933FF;/*背景颜色*/

position:relative;}

#content{width:900px; height:500px; background:#669999;}

#content div{width:225px; height:500px; background:#3366FF;

float:left;/*在水平方向显示*/ position:relative;/*相对定位*/

overflow:hidden;}

#content div span{width:225px; height:500px;  display:block; position:absolute; top:0px; left:225px;}

input#but1:checked ~ #content div span:nth-child(1){background-image:url("images/1.jpg");}

input#but2:checked ~ #content div span:nth-child(2){background-image:url("images/2.jpg");}

input#but3:checked ~ #content div span:nth-child(3){background-image:url("images/3.jpg");}

input#but4:checked ~ #content div span:nth-child(4){background-image:url("images/4.jpg");}*/

#content div:nth-child(1) span{background-position:0px 0px;}

#content div:nth-child(2) span{background-position:-225px 0px;}

#content div:nth-child(3) span{background-position:-450px 0px;}

#content div:nth-child(4) span{background-position:-675px 0px;}

input#but1:checked ~ #content div span:nth-child(1),

input#but2:checked ~ #content div span:nth-child(2),

input#but3:checked ~ #content div span:nth-child(3),

input#but4:checked ~ #content div span:nth-child(4)

{left:0px;-webkit-transition:left 0.5s ease;}

label{width:30px; height:30px; background:#33FFFF; display:block; border-radius:15px;

text-align:center;/*水平方向显示*/line-height:30px;/*在竖直方向距中*/

position:absolute;z-index:333;top:450px;}

input#but1 + label{left:700px;}

input#but2 + label{left:750px;}

input#but3 + label{left:800px;}

input#but4 + label{left:850px;}

input:checked + label{background:#fff;border:5px solid #33FFFF;border-radius:20px;}

input{display:none;/*隐藏*/}

效果图：

CSS3实现轮播图效果

CSS3实现轮播图主要是由css:background-position和css3:animation实现.且实现此轮播需要一张四个图横着相连的图片. 注(Internet Explorer 10.F ...

CSS3实现轮播图效果2

先前用CSS3做了一个一张图片实现的轮播,但是这样的图片很难找,于是又改进了一下. HTML: