CSS点击换图

HTML：

<input type="radio" name="bt" id="label01" class="eee yyy" checked>
<label for="label01" class="label1">1</label>

<input type="radio" name="bt" id="label02" class="rrr yyy">
<label for="label02" class="label2">2</label>

<input type="radio" name="bt" id="label03" class="www yyy">
<label for="label03" class="label3">3</label>

 <div class="tt"></div>

CSS：


.tt{
    width:450px;
    height:450px;
    float:left;
    margin-left:25px;
    margin-top:25px;
    background:url("../images/01.jpg") no-repeat, url("../images/02.jpg") no-repeat, url("../images/03.jpg") no-repeat;/*多重背景*/
    background-size:450px 450px;/*大小*/
    border:2px solid #000;
    transition:all 1s;/*过渡属性*/
}
label{
    display:inline-block;/*行内块级*/
    width:30px;
    height:30px;
    border-radius:15px;/*圆角*/
    background:yellow;
    z-index:999;/*层次*/
    position:relative;/*相对定位*/
    top:430px;
    right:150px;
    cursor:pointer;/*鼠标样子*/
    text-align:center;
    line-height:30px;
    margin-right:10px;
    opacity:.3;/*透明度*/
}
/*各按钮移入、点击和点击后的样式*/
label:hover , .yyy:checked + label{
    opacity:1;
    box-shadow:1px 1px 1px #123456;/*阴影*/
    color:red;
}
label:active{
    box-shadow:2px 2px 2px #123456 inset;
}

/*各按钮移入、点击和点击后的样式 结束*/


/*各按钮点击时图片区域的背景位移*/
.eee:checked ~ .tt {
    background-position:0,450px,900px;/*给图片位移定位，此为缩写形式，都是X轴，第几个值分别代表第几张图片的位移*/
}
.rrr:checked ~ .tt{
    background-position:-450px,0,450px;
}
.www:checked ~ .tt{
    background-position:-900px,-450px,0;
}
/*各按钮点击时图片区域的背景位移 结束*/



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

 

 

参照戴斯林的作品，从而了解的一种效果。