css3百叶窗轮播图效果_html/css_WEB-ITnose

标题




#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;/*隐藏*/}

1


2


3


4

查看更多关于css3百叶窗轮播图效果_html/css_WEB-ITnose的详细内容...