css3 ブラインド カルーセル効果_html/css_WEB-ITnose

" " " キーワード" content="キーワード,キーワード">
/css">
#Con{width:900px; /*幅*/高さ:500px;/*高さ*/背景:#9933FF;/*背景色*/
位置:相対;}
#content{幅: 900px; 高さ: 500px;}
#Content div {幅: 225px; 高さ: 500px;
Float: left;/* 表示*/ ポジティブ: 関連;/* 位置決め*/er ouverflow: hidden;}
#Content Div スパン {幅: 225px;高さ: 500 ピクセル; 位置: 絶対; トップ: 0 ピクセル; 左: 225 ピクセル;}。 .jpg");}

input#but2:checked ~ #content div span:nth-child(2){background-image:url ("images/2.jpg");}
input#but3:checked ~ # content div scan: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) スパン{背景位置 :0px 0px;}
#content div:nth-child(2) スパン{背景-位置:-225px 0px;}
#content div:nth-child(3) スパン{背景位置:-450px 0px;}
#content div:nth-child(4) スパン{背景位置:-675px 0px ;}

input#but1:checked ~ #content div span:nth-child(1),
input#but2:checked ~ #content div span:nth-child(2),
input#but3:checked ~ #content divspan:nth-child(3),
input#but4:checked ~ #content divspan:nth-child(4)
{left :0px;-webkit-transition:left 0.5s easy;}

label{width :30px; height:30px; background:#33FFFF; border-radius:15px;
text-align:center;/* 水平方向の距離は*/line-height: 30px;/* */
位置: 絶対; 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 ;/*hide*/}