欢迎光临
我们一直在努力

web前端教程:纯CSS3实现轮播点击切换特效

纯CSS3实现轮播点击切换特效废话不多说直接看效果;

html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
                <div class="slide-container">
                     <input type="radio" name="slider2" id="slider1" checked="checked" >
                     <input type="radio" name="slider2" id="slider2" >
                     <input type="radio" name="slider2" id="slider3" >
                     <input type="radio" name="slider2" id="slider4" >
                     <div class="slide_bd">
                         <ul class="list">
                             <li>
                                 <img src="newsaa.jpg"/>
                             </li>
                             <li>
                                 <img src="newsaa.jpg"/>
                             </li>
                             <li>
                                 <img src="newsaa.jpg"/>
                             </li>
                             <li>
                                 <img src="newsaa.jpg"/>
                             </li>
                         </ul>
                     </div>
                     <div class="num">
                         <label for="slider1"></label>
                         <label for="slider2"></label>
                         <label for="slider3"></label>
                         <label for="slider4"></label>
                     </div>
                 </div>
    </body>
</html>

css3:

ul,li{list-style:none;}
                     .slide-container {position:relative;width:384px;height:512px;margin:0 auto;text-align:center;overflow:hidden;}
                     .slide-container input{display:none;}
             
                     .slide_bd {position:absolute;width:100%;height:100%;overflow:hidden;}
             
                     .slide_bd .list {position:absolute;left:0;top:0;width:400%;height:100%;-webkit-transition:left .5s ease-out;-moz-transition:left .5s ease-out;-o-transition:left .5s ease-out;-ms-transition:left .5s ease-out;transition:left .5s ease-out;}
             
                     .slide_bd .list li {float:left;}
             
                     /*  #slider1:checked~.slide_bd .list含义是:匹配#slider1选中的 后面的.slide_bd .list的元素 */
                     /* ~ 是兄弟元素选择器 E~F:匹配位于E元素后面的F元素*/
             
                     #slider1:checked~.slide_bd .list{left:0;}
                     #slider2:checked~.slide_bd .list{left:-100%;}
                     #slider3:checked~.slide_bd .list{left:-200%;}
                     #slider4:checked~.slide_bd .list{left:-300%;}
             
                     .slide_bd .list img{display:block;width:384px;height:512px;overflow:hidden;}
             
                     .num {position:absolute;bottom:10px;width:100%;}
             
                     .num label {display:inline-block;width:10px;height:10px;border-radius:10px;margin:0 5px;background:#999;}
             
                     /* 鼠标移动上去的时候 */
                     .num label:hover,
                     #slider1:checked~.num label:nth-child(1),
                     #slider2:checked~.num label:nth-child(2),
                     #slider3:checked~.num label:nth-child(3),
                     #slider4:checked~.num label:nth-child(4){
                         background:#f00;
                         cursor:pointer;
                         -webkit-transform:scale(1.3);
                         -moz-transform:scale(1.3);
                         -o-transform:scale(1.3);
                         -ms-transform:scale(1.3);
                         transform:scale(1.3)
                         }

 

赞(0) 打赏
未经允许不得转载:新起点博客 » web前端教程:纯CSS3实现轮播点击切换特效

评论 抢沙发

评论前必须登录!