H5+C3实现超炫酷图品切换效果

我们如何使用目前学到的知识做出一张炫酷的图片切换效果惊呆小伙伴呢

注：本文知识本人一些学习心得，适合让入门的小白一起练习和尝试

下面是效果图：

 

  我们在给中间的图片增加我们需要选择切换图片的小图，当我们点击这些小图时，切换我们的背景图片达到我们完成切换图片的目的。

HTML结构：

代码部分：方便大家取用

     <div class="box">
        <img id="pic1" src="images/bg1.jpg" alt="">
        <img id="pic2" src="images/bg2.jpg" alt="">
        <img id="pic3" src="images/bg3.jpg" alt="">
        <img id="pic4" src="images/bg4.jpg" alt="">
        <img id="pic5" src="images/bg5.jpg" alt="">
        <ul class="btn">
            <li><a href="#pic1"></a></li>
            <li><a href="#pic2"></a></li>
            <li><a href="#pic3"></a></li>
            <li><a href="#pic4"></a></li>
            <li><a href="#pic5"></a></li>
        </ul>
    </div>

2.CSS部分

 代码部分

      *{
            /*清除两边距离*/
            margin:0;
            padding:0;
        }
        img{
            /*转化为块元素*/
            display: block;
        }
        li{
            list-style: none;
        }
        html,body{
            height:100%;
        }
        .box{
            width:100%;
            height:100%;           
        }
        .box img{
            width:100%;
            height:100%;
            position:fixed;
            top:0;
            left:0;
        }
        .box > img:first-child{
            z-index:1;
        }
        .btn{
            width:950px;
            height:170px;
            position:fixed;
            top:0;
            lefT:0;
            bottom:0;
            right:0;
            margin:auto;
            z-index:1;
        }
        .btn li{
            width:150px;
            height:150px;
            border:10px solid #fff;
            float:left;
            margin:0 10px;
            border-radius: 50%;
        }
        .btn li:nth-child(1){
            background:url(images/sbg1.jpg) no-repeat center;
        }
        .btn li:nth-child(2){
            background:url(images/sbg2.jpg) no-repeat center;
        }
        .btn li:nth-child(3){
            background:url(images/sbg3.jpg) no-repeat center;
        }
        .btn li:nth-child(4){
            background:url(images/sbg4.jpg) no-repeat center;
        }
        .btn li:nth-child(5){
            background:url(images/sbg5.jpg) no-repeat center;
        }
        .btn li a{
            display:block;
            width:150px;
            height:150px;
            background:rgba(0,0,0,0.5);
            border-radius: 50%;
        }
        .btn li:hover a{
            background:rgba(0,0,0,0);
            transition: all 1s ease;
        }
        .box > img:target{
            z-index:1;
        }

 通过上述代码就可以实现我们超炫酷的css点击切换图片的效果了，需要的小伙伴可以复制自取。