问答详情
源自：7-8 切换背景图像综合练习题

你们要的顺滑过渡动画，很多人觉得动画过渡的很生硬，这里我修改了一下动画部分，也替换了图片资源解决了资源not found的问题，请参考使用吧

<!DOCTYPE HTML>

<htmllang="en-US">

    <head>

        <meta charset="UTF-8">

     <title>CSS3 Full Background Slider </title>

        <style type="text/css">

            @importurl("http://www.w3cplus.com/demo/css3/base.css");

            @importurl("http://fonts.googleapis.com/css?family=Yesteryear");

            html,body {

            height: 100%;

            }

            /*设置背景图片全屏显示，并且居中*/

            img.bg {

                min-height: 100%;

                min-width: 1024px;

                width: 100%;

                height: auto !important;

                height: 100%;

                position: fixed;

                top: 0;

                left: 50%;

                z-index:1;

                -webkit-transform: translateX(-50%);

                -moz-transform: translateX(-50%);

                -o-transform: translateX(-50%);

                -ms-transform: translateX(-50%);

            }

            /*设置背景图片从左向右移入显示的动画效果*/

            /* Slide Left */

            

            @-webkit-keyframes 'slideLeft' {

             0% { left: -100%; }

             100% { left: 50%; }

            }

            @-moz-keyframes 'slideLeft' {

             0% { left: -100%; }

             100% { left: 50%; }

            }

            @-o-keyframes 'slideLeft' {

             0% { left: -100%; }

             100% { left: 50%; }

            }

            @-ms-keyframes 'slideLeft' {

             0% { left: -100%; }

             100% { left: 50%; }

            }

            @keyframes 'slideLeft' {

             0% { left: -100%; }

             100% { left: 50%; }

            }

            /*设置背景图像从底部向顶部移入的动画效果*/

             /* Slide Bottom */

            

            @-webkit-keyframes 'slideBottom' {

             0% { top: 350px; }

             100% { top: 0; }

            }

            @-moz-keyframes 'slideBottom' {

             0% { top: 350px; }

             100% { top: 0; }

            }

            @-ms-keyframes 'slideBottom' {

             0% { top: 350px; }

             100% { top: 0; }

            }

            @-o-keyframes 'slideBottom' {

             0% { top: 350px; }

             100% { top: 0; }

            }

            @keyframes 'slideBottom' {

             0% { top: 350px; }

             100% { top: 0; }

            }

            /*设置背景图片由小到大放大动画效果*/

            /* Zoom In */

            

            @-webkit-keyframes 'zoomIn' {

             0% { -webkit-transform: scale(0.1); }

             100% { -webkit-transform: translateX(-50%); }

            }

            @-moz-keyframes 'zoomIn' {

             0% { -moz-transform: scale(0.1); }

             100% { -moz-transform: translateX(-50%); }

            }

            @-ms-keyframes 'zoomIn' {

             0% { -ms-transform: scale(0.1); }

             100% { -ms-transform: translateX(-50%); }

            }

            @-o-keyframes 'zoomIn' {

             0% { -o-transform: scale(0.1); }

             100% { -o-transform: translateX(-50%); }

            }

            @keyframes 'zoomIn' {

             0% { transform: scale(0.1); }

             100% { transform: translateX(-50%); }

            }

            /*设置背景图像由大到小缩小动画效果*/

            /* Zoom Out */

            

            @-webkit-keyframes 'zoomOut' {

             0% { -webkit-transform: scale(2); }

             100% { -webkit-transform: translateX(-50%); }

            }

            @-moz-keyframes 'zoomOut' {

             0% { -moz-transform: scale(2); }

             100% { -moz-transform: translateX(-50%); }

            }

            @-ms-keyframes 'zoomOut' {

             0% { -ms-transform: scale(2); }

             100% { -ms-transform: translateX(-50%); }

            }

            @-o-keyframes 'zoomOut' {

             0% { -o-transform: scale(2); }

             100% { -o-transform: translateX(-50%); }

            }

            @keyframes 'zoomOut' {

             0% { transform: scale(2); }

             100% { transform: translateX(-50%); }

            }

            /*背景图像旋转出现动画效果*/

            /* Rotate */

            

            @-webkit-keyframes 'rotate' {

             0% { -webkit-transform: rotate(-360deg) scale(0.1); }

             100% { -webkit-transform: none; left:0; }

            }

            @-moz-keyframes 'rotate' {

             0% { -moz-transform: rotate(-360deg) scale(0.1); }

             100% { -moz-transform: none; left:0; }

            }

            @-ms-keyframes 'rotate' {

             0% { -ms-transform: rotate(-360deg) scale(0.1); }

             100% { -ms-transform: none; left:0; }

            }

            @-o-keyframes 'rotate' {

             0% { -o-transform: rotate(-360deg) scale(0.1); }

             100% { -o-transform: none; left:0; }

            }

            @keyframes 'rotate' {

             0% { transform: rotate(-360deg) scale(0.1); }

             100% { transform: none; left:0; }

            }

            /*设置背景图像不显示动画效果*/

            @-webkit-keyframes 'notTarget' {

             0% { z-index: 75; }

             100% { z-index: 75; }

            }

            @-moz-keyframes 'notTarget' {

             0% { z-index: 75; }

             100% { z-index: 75; }

            }

            @-ms-keyframes 'notTarget' {

             0% { z-index: 75; }

             100% { z-index: 75; }

            }

            @-o-keyframes 'notTarget' {

             0% { z-index: 75; }

             100% { z-index: 75; }

            }

            @keyframes 'notTarget' {

             0% { z-index: 75; }

             100% { z-index: 75; }

            }

            

            

            

            .slider {

            position: absolute;

            width: 100%;

            text-align: center;

            z-index: 9999;

            bottom: 100px;

            }

            .slider li {

            display: inline-block;

            

            width: 170px;

            height: 130px;

            margin-right: 15px;

            }

            .slider a {

            display: inline-block;

            width: 170px;

            padding-top: 70px;

            padding-bottom: 20px;

            position: relative;

            cursor: pointer;

            border: 2px solid #fff;

            border-radius: 5px;

            vertical-align: top;

            color: #fff;

            text-decoration: none;

            font-size: 22px;

            font-family: 'Yesteryear', cursive;

            text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.8),-2px -2px 1px rgba(0, 0, 0, 0.3),-3px -3px 1px rgba(0, 0, 0, 0.3);

            }

            /*任务一、设置不同列表的背景色*/

            .slider li:nth-of-type(1) a {

            background-color: #02646e;

            }

            .slider li:nth-of-type(2) a {

            background-color: #eb0837;

            }

            .slider li:nth-of-type(3) a {

            background-color: #67b374;

            }    

            .slider li:nth-of-type(4) a {

            background-color: #e6674a;

            }    

            .slider li:nth-of-type(5) a {

            background-color: #e61061;

            }

            /*任务二、设置缩略图形状*/

            .slider li a:after {

            content:"";

            display: block;

            height: 120px;

            width: 120px;

            border: 5px solid #fff;

            border-radius: 50%;

            position: absolute;

            left: 50%;

            margin-left: -60px;

            z-index: 9999;

            top: -80px;

            }

            /*任务三、设置缩略图背景图像*/

            .slider li:nth-of-type(1) a:after{

           background: url(https://c-ssl.duitang.com/uploads/item/201603/11/20160311104517_3c4ra.thumb.700_0.jpeg) no-repeat center;

           }

           .slider li:nth-of-type(2) a:after{

           background: url(https://c-ssl.duitang.com/uploads/item/201506/02/20150602171112_MjVQx.thumb.1900_0.jpeg) no-repeat center;

           }

           .slider li:nth-of-type(3) a:after{

           background: url(https://c-ssl.duitang.com/uploads/item/201710/28/20171028163817_KJGH8.jpeg) no-repeat center;

           }

           .slider li:nth-of-type(4) a:after{

           background: url(https://b-ssl.duitang.com/uploads/item/201903/16/20190316104400_ui3SK.jpeg) no-repeat center;

           }

           .slider li:nth-of-type(5) a:after{

           background: url(https://c-ssl.duitang.com/uploads/item/201406/12/20140612202753_u4nG5.thumb.1900_0.jpeg) no-repeat center;

           }

            /*任务四、给缩略图添加蒙板效果*/

            .slider li a:before {

            content:"";

            display: block;

            height: 120px;

            width: 120px;

            border: 5px solid #fff;

            border-radius: 50%;

            position: absolute;

            left: 50%;

            margin-left: -60px;

            z-index: 99999;

            top: -80px;

            background: rgba(0,0,0,0.3);

            }

            /*任务五、鼠标悬浮时，修改缩略图蒙板透明度*/

            .slider li a:hover:before {

            opacity:0;

            }

            /*任务六、点击缩略图，切换背景图*/

            /*背景图从左向右出现*/

            #bg1:target {

             z-index: 100;

             -webkit-animation-name: slideLeft;

             -webkit-animation-duration: 1s;

             -webkit-animation-iteration-count: 1;

             -moz-animation-name: slideLeft;

             -moz-animation-duration: 1s;

             -moz-animation-iteration-count: 1;

             -ms-animation-name: slideLeft;

             -ms-animation-duration: 1s;

             -ms-animation-iteration-count: 1;

             -o-animation-name: slideLeft;

             -o-animation-duration: 1s;

             -o-animation-iteration-count: 1;

             animation-name: slideLeft;

             animation-duration: 1s;

             animation-iteration-count: 1;

            }

            /*背景图从下向上出现*/

            #bg2:target {

             z-index: 100;

            

             -webkit-animation-name: slideBottom;

             -webkit-animation-duration: 1s;

             -webkit-animation-iteration-count: 1;

             -moz-animation-name: slideBottom;

             -moz-animation-duration: 1s;

             -moz-animation-iteration-count: 1;

             -ms-animation-name: slideBottom;

             -ms-animation-duration: 1s;

             -ms-animation-iteration-count: 1;

             -o-animation-name: slideBottom;

             -o-animation-duration: 1s;

             -o-animation-iteration-count: 1;

            animation-name: slideBottom;

             animation-duration: 1s;

             animation-iteration-count: 1;

            }

            /*背景图由小到大出现*/

            #bg3:target {

             z-index: 100;

             -webkit-animation-name: zoomIn;

             -webkit-animation-duration: 1s;

             -webkit-animation-iteration-count: 1;

             -moz-animation-name: zoomIn;

             -moz-animation-duration: 1s;

             -moz-animation-iteration-count: 1;

             -ms-animation-name: zoomIn;

             -ms-animation-duration: 1s;

             -ms-animation-iteration-count: 1;

             -o-animation-name: zoomIn;

             -o-animation-duration: 1s;

             -o-animation-iteration-count: 1;

             animation-name: zoomIn;

             animation-duration: 1s;

             animation-iteration-count: 1;

            }

            

            /*背景图由大到小出现*/

            #bg4:target {

             z-index: 100;

             -webkit-animation-name: zoomOut;

             -webkit-animation-duration: 1s;

             -webkit-animation-iteration-count: 1;

             -moz-animation-name: zoomOut;

             -moz-animation-duration: 1s;

             -moz-animation-iteration-count: 1;

             -ms-animation-name: zoomOut;

             -ms-animation-duration: 1s;

             -ms-animation-iteration-count: 1;

             -o-animation-name: zoomOut;

             -o-animation-duration: 1s;

             -o-animation-iteration-count: 1;

             animation-name: zoomOut;

             animation-duration: 1s;

             animation-iteration-count: 1;

            }

            

            /*背景图旋转出现*/

            #bg5:target {

             z-index: 100;

             -webkit-animation-name: rotate;

             -webkit-animation-duration: 1s;

             -webkit-animation-iteration-count: 1;

             -moz-animation-name: rotate;

             -moz-animation-duration: 1s;

             -moz-animation-iteration-count: 1;

             -ms-animation-name: rotate;

             -ms-animation-duration: 1s;

             -ms-animation-iteration-count: 1;

             -o-animation-name: rotate;

             -o-animation-duration: 1s;

             -o-animation-iteration-count: 1;

             animation-name: rotate;

             animation-duration: 1s;

             animation-iteration-count: 1;

            }

            /*任务七、设置不显示的背景图层级*/

            /* Not Target */

            img:not(:target) {

             -webkit-animation-name: notTarget;

             -webkit-animation-duration: 1s;

             -webkit-animation-iteration-count: 1;

             -moz-animation-name: notTarget;

             -moz-animation-duration: 1s;

             -moz-animation-iteration-count: 1;

             -ms-animation-name: notTarget;

             -ms-animation-duration: 1s;

             -ms-animation-iteration-count: 1;

             -o-animation-name: notTarget;

             -o-animation-duration: 1s;

             -o-animation-iteration-count: 1;

             animation-name: notTarget;

             animation-duration: 1s;

             animation-iteration-count: 1;

            }

        </style>

    </head>

    <body>

        <div class="slider">

            <ul class="clearfix">

             <li><a href="#bg1">Hipster Fashion Haircut </a></li>

         <li><a href="#bg2">Cloud Computing Services &amp; Consulting</a></li>

         <li><a href="#bg3">My haire is sooo fantastic!</a></li>

         <li><a href="#bg4">Eat healthy &amp; excersice!</a></li>

         <li><a href="#bg5">Lips so kissable I could die ...</a></li>

         </ul>

        </div>

        <img src="https://c-ssl.duitang.com/uploads/item/201603/11/20160311104517_3c4ra.thumb.700_0.jpeg" alt="" class="bg slideLeft" id="bg1" />

        <img src="https://c-ssl.duitang.com/uploads/item/201506/02/20150602171112_MjVQx.thumb.1900_0.jpeg" alt="" class="bg slideBottom" id="bg2" />

        <img src="https://c-ssl.duitang.com/uploads/item/201710/28/20171028163817_KJGH8.jpeg" alt="" class="bg zoomIn" id="bg3" />

        <img src="https://b-ssl.duitang.com/uploads/item/201903/16/20190316104400_ui3SK.jpeg" alt="" class="bg zoomOut" id="bg4" />

        <img src="https://c-ssl.duitang.com/uploads/item/201406/12/20140612202753_u4nG5.thumb.1900_0.jpeg" alt="" class="bg rotate" id="bg5" />

    </body>

</html>

提问者：慕数据7136769 2019-09-05 12:00

个回答

  • 慕数据7136769
    2019-09-05 12:32:06

    <!DOCTYPE HTML>
<!-- 好看的格式，我可能有强迫症吧【手动滑稽】-->
<htmllang="en-US">    
<head>        
    <meta charset="UTF-8">     
    <title>CSS3 Full Background Slider </title>        
    <style type="text/css">            
        @importurl("http://www.w3cplus.com/demo/css3/base.css");            
        @importurl("http://fonts.googleapis.com/css?family=Yesteryear");            
        html,body {            
            height: 100%;            
        }            
        /*设置背景图片全屏显示，并且居中*/            
        img.bg {                
            min-height: 100%;                
            min-width: 1024px;                
            width: 100%;                
            height: auto !important;                
            height: 100%;                
            position: fixed;                
            top: 0;                
            left: 50%;                
            z-index:1;                
            -webkit-transform: translateX(-50%);                
            -moz-transform: translateX(-50%);                
            -o-transform: translateX(-50%);                
            -ms-transform: translateX(-50%);            
        }            
        /*设置背景图片从左向右移入显示的动画效果*/            
        /* Slide Left */                        
        @-webkit-keyframes 'slideLeft' {             
            0% { left: -100%; }             
            100% { left: 50%; }            
        }            
        @-moz-keyframes 'slideLeft' {             
            0% { left: -100%; }             
            100% { left: 50%; }            
        }            
        @-o-keyframes 'slideLeft' {             
            0% { left: -100%; }             
            100% { left: 50%; }            
        }            
        @-ms-keyframes 'slideLeft' {             
            0% { left: -100%; }             
            100% { left: 50%; }            
        }            
        @keyframes 'slideLeft' {             
            0% { left: -100%; }             
            100% { left: 50%; }            
        }            
        /*设置背景图像从底部向顶部移入的动画效果*/             
        /* Slide Bottom */                        
        @-webkit-keyframes 'slideBottom' {             
            0% { top: 350px; }             
            100% { top: 0; }            
        }            
        @-moz-keyframes 'slideBottom' {             
            0% { top: 350px; }             
            100% { top: 0; }            
        }            
        @-ms-keyframes 'slideBottom' {             
            0% { top: 350px; }             
            100% { top: 0; }            
        }            
        @-o-keyframes 'slideBottom' {             
            0% { top: 350px; }             
            100% { top: 0; }            
        }            
        @keyframes 'slideBottom' {             
            0% { top: 350px; }             
            100% { top: 0; }            
        }            
        /*设置背景图片由小到大放大动画效果*/            
        /* Zoom In */                        
        @-webkit-keyframes 'zoomIn' {             
            0% { -webkit-transform: scale(0.1); }             
            100% { -webkit-transform: translateX(-50%); }            
        }            
        @-moz-keyframes 'zoomIn' {             
            0% { -moz-transform: scale(0.1); }             
            100% { -moz-transform: translateX(-50%); }            
        }            
        @-ms-keyframes 'zoomIn' {             
            0% { -ms-transform: scale(0.1); }             
            100% { -ms-transform: translateX(-50%); }            
        }            
        @-o-keyframes 'zoomIn' {             
            0% { -o-transform: scale(0.1); }             
            100% { -o-transform: translateX(-50%); }            
        }            
        @keyframes 'zoomIn' {             
            0% { transform: scale(0.1); }             
            100% { transform: translateX(-50%); }            
        }            
        /*设置背景图像由大到小缩小动画效果*/            
        /* Zoom Out */                        
        @-webkit-keyframes 'zoomOut' {             
            0% { -webkit-transform: scale(2); }             
            100% { -webkit-transform: translateX(-50%); }            
        }            
        @-moz-keyframes 'zoomOut' {             
            0% { -moz-transform: scale(2); }             
            100% { -moz-transform: translateX(-50%); }            
        }            
        @-ms-keyframes 'zoomOut' {             
            0% { -ms-transform: scale(2); }             
            100% { -ms-transform: translateX(-50%); }            
        }            
        @-o-keyframes 'zoomOut' {             
            0% { -o-transform: scale(2); }             
            100% { -o-transform: translateX(-50%); }            
        }            
        @keyframes 'zoomOut' {             
            0% { transform: scale(2); }             
            100% { transform: translateX(-50%); }            
        }            
        /*背景图像旋转出现动画效果*/            
        /* Rotate */                        
        @-webkit-keyframes 'rotate' {             
            0% { -webkit-transform: rotate(-360deg) scale(0.1); }             
            100% { -webkit-transform: none; left:0; }            
        }            
        @-moz-keyframes 'rotate' {             
            0% { -moz-transform: rotate(-360deg) scale(0.1); }             
            100% { -moz-transform: none; left:0; }            
        }            
        @-ms-keyframes 'rotate' {             
            0% { -ms-transform: rotate(-360deg) scale(0.1); }             
            100% { -ms-transform: none; left:0; }            
        }            
        @-o-keyframes 'rotate' {             
            0% { -o-transform: rotate(-360deg) scale(0.1); }             
            100% { -o-transform: none; left:0; }            
        }            
        @keyframes 'rotate' {             
            0% { transform: rotate(-360deg) scale(0.1); }             
            100% { transform: none; left:0; }            
        }            
        /*设置背景图像不显示动画效果*/            
        @-webkit-keyframes 'notTarget' {             
            0% { z-index: 75; }             
            100% { z-index: 75; }            
        }            
        @-moz-keyframes 'notTarget' {             
            0% { z-index: 75; }             
            100% { z-index: 75; }            
        }            
        @-ms-keyframes 'notTarget' {             
            0% { z-index: 75; }             
            100% { z-index: 75; }            
        }            
        @-o-keyframes 'notTarget' {             
            0% { z-index: 75; }             
            100% { z-index: 75; }            
        }            
        @keyframes 'notTarget' {             
            0% { z-index: 75; }             
            100% { z-index: 75; }            
        }                                                
        .slider {            
            position: absolute;            
            width: 100%;            
            text-align: center;            
            z-index: 9999;            
            bottom: 100px;            
        }            
        .slider li {            
            display: inline-block;                        
            width: 170px;            
            height: 130px;            
            margin-right: 15px;            
        }            
        .slider a {            
            display: inline-block;            
            width: 170px;            
            padding-top: 70px;            
            padding-bottom: 20px;            
            position: relative;            
            cursor: pointer;            
            border: 2px solid #fff;            
            border-radius: 5px;            
            vertical-align: top;            
            color: #fff;            
            text-decoration: none;            
            font-size: 22px;            
            font-family: 'Yesteryear', cursive;            
            text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.8),-2px -2px 1px rgba(0, 0, 0, 0.3),-3px -3px 1px rgba(0, 0, 0, 0.3);            
        }            
        /*任务一、设置不同列表的背景色*/            
        .slider li:nth-of-type(1) a {            
            background-color: #02646e;            
        }            
        .slider li:nth-of-type(2) a {            
            background-color: #eb0837;            
        }            
        .slider li:nth-of-type(3) a {            
            background-color: #67b374;            
        }                
        .slider li:nth-of-type(4) a {            
            background-color: #e6674a;            
        }                
        .slider li:nth-of-type(5) a {            
            background-color: #e61061;            
        }            
        /*任务二、设置缩略图形状*/            
        .slider li a:after {            
            content:"";            
            display: block;            
            height: 120px;            
            width: 120px;            
            border: 5px solid #fff;            
            border-radius: 50%;            
            position: absolute;            
            left: 50%;            
            margin-left: -60px;            
            z-index: 9999;            
            top: -80px;            
        }            
        /*任务三、设置缩略图背景图像*/            
        .slider li:nth-of-type(1) a:after{           
            background: url(https://c-ssl.duitang.com/uploads/item/201603/11/20160311104517_3c4ra.thumb.700_0.jpeg) no-repeat center;           
        }           
        .slider li:nth-of-type(2) a:after{           
            background: url(https://c-ssl.duitang.com/uploads/item/201506/02/20150602171112_MjVQx.thumb.1900_0.jpeg) no-repeat center;           
        }           
        .slider li:nth-of-type(3) a:after{           
            background: url(https://c-ssl.duitang.com/uploads/item/201710/28/20171028163817_KJGH8.jpeg) no-repeat center;           
        }           
        .slider li:nth-of-type(4) a:after{           
            background: url(https://b-ssl.duitang.com/uploads/item/201903/16/20190316104400_ui3SK.jpeg) no-repeat center;           
        }           
        .slider li:nth-of-type(5) a:after{           
            background: url(https://c-ssl.duitang.com/uploads/item/201406/12/20140612202753_u4nG5.thumb.1900_0.jpeg) no-repeat center;           
        }            
        /*任务四、给缩略图添加蒙板效果*/            
        .slider li a:before {            
            content:"";            
            display: block;            
            height: 120px;            
            width: 120px;            
            border: 5px solid #fff;            
            border-radius: 50%;            
            position: absolute;            
            left: 50%;            
            margin-left: -60px;            
            z-index: 99999;            
            top: -80px;            
            background: rgba(0,0,0,0.3);            
        }            
        /*任务五、鼠标悬浮时，修改缩略图蒙板透明度*/            
        .slider li a:hover:before {            
            opacity:0;            
        }            
        /*任务六、点击缩略图，切换背景图*/            
        /*背景图从左向右出现*/            
        #bg1:target {             
            z-index: 100;             
            -webkit-animation-name: slideLeft;             
            -webkit-animation-duration: 1s;             
            -webkit-animation-iteration-count: 1;             
            -moz-animation-name: slideLeft;             
            -moz-animation-duration: 1s;             
            -moz-animation-iteration-count: 1;             
            -ms-animation-name: slideLeft;             
            -ms-animation-duration: 1s;             
            -ms-animation-iteration-count: 1;             
            -o-animation-name: slideLeft;             
            -o-animation-duration: 1s;             
            -o-animation-iteration-count: 1;             
            animation-name: slideLeft;             
            animation-duration: 1s;             
            animation-iteration-count: 1;            
        }            
        /*背景图从下向上出现*/            
        #bg2:target {             
            z-index: 100;                         
            -webkit-animation-name: slideBottom;             
            -webkit-animation-duration: 1s;             
            -webkit-animation-iteration-count: 1;            
            -moz-animation-name: slideBottom;             
            -moz-animation-duration: 1s;            
             -moz-animation-iteration-count: 1;            
              -ms-animation-name: slideBottom;            
              -ms-animation-duration: 1s;            
              -ms-animation-iteration-count: 1;            
              -o-animation-name: slideBottom;             
              -o-animation-duration: 1s;            
              -o-animation-iteration-count: 1;            
              animation-name: slideBottom;             
              animation-duration: 1s;             
              animation-iteration-count: 1;            
        }            
        /*背景图由小到大出现*/            
        #bg3:target {             
            z-index: 100;             
            -webkit-animation-name: zoomIn;             
            -webkit-animation-duration: 1s;             
            -webkit-animation-iteration-count: 1;             
            -moz-animation-name: zoomIn;             
            -moz-animation-duration: 1s;             
            -moz-animation-iteration-count: 1;             
            -ms-animation-name: zoomIn;             
            -ms-animation-duration: 1s;             
            -ms-animation-iteration-count: 1;             
            -o-animation-name: zoomIn;             
            -o-animation-duration: 1s;             
            -o-animation-iteration-count: 1;             
            animation-name: zoomIn;             
            animation-duration: 1s;             
            animation-iteration-count: 1;            
        }                        
        /*背景图由大到小出现*/            
        #bg4:target {             
            z-index: 100;             
            -webkit-animation-name: zoomOut;             
            -webkit-animation-duration: 1s;             
            -webkit-animation-iteration-count: 1;             
            -moz-animation-name: zoomOut;             
            -moz-animation-duration: 1s;             
            -moz-animation-iteration-count: 1;             
            -ms-animation-name: zoomOut;             
            -ms-animation-duration: 1s;             
            -ms-animation-iteration-count: 1;             
            -o-animation-name: zoomOut;             
            -o-animation-duration: 1s;             
            -o-animation-iteration-count: 1;             
            animation-name: zoomOut;             
            animation-duration: 1s;             
            animation-iteration-count: 1;            
        }                        
        /*背景图旋转出现*/            
        #bg5:target {             
            z-index: 100;             
            -webkit-animation-name: rotate;             
            -webkit-animation-duration: 1s;             
            -webkit-animation-iteration-count: 1;             
            -moz-animation-name: rotate;             
            -moz-animation-duration: 1s;             
            -moz-animation-iteration-count: 1;             
            -ms-animation-name: rotate;             
            -ms-animation-duration: 1s;             
            -ms-animation-iteration-count: 1;             
            -o-animation-name: rotate;             
            -o-animation-duration: 1s;             
            -o-animation-iteration-count: 1;             
            animation-name: rotate;             
            animation-duration: 1s;             
            animation-iteration-count: 1;            
        }            
        /*任务七、设置不显示的背景图层级*/            
        /* Not Target */            
        img:not(:target) {             
            -webkit-animation-name: notTarget;             
            -webkit-animation-duration: 1s;             
            -webkit-animation-iteration-count: 1;             
            -moz-animation-name: notTarget;             
            -moz-animation-duration: 1s;             
            -moz-animation-iteration-count: 1;             
            -ms-animation-name: notTarget;             
            -ms-animation-duration: 1s;             
            -ms-animation-iteration-count: 1;             
            -o-animation-name: notTarget;             
            -o-animation-duration: 1s;             
            -o-animation-iteration-count: 1;             
            animation-name: notTarget;             
            animation-duration: 1s;             
            animation-iteration-count: 1;            
        }        
    </style>    
</head>   
<body>        
    <div class="slider">            
        <ul class="clearfix">             
            <li><a href="#bg1">Hipster Fashion Haircut </a></li>         
            <li><a href="#bg2">Cloud Computing Services &amp; Consulting</a></li>         
            <li><a href="#bg3">My haire is sooo fantastic!</a></li>         
            <li><a href="#bg4">Eat healthy &amp; excersice!</a></li>         
            <li><a href="#bg5">Lips so kissable I could die ...</a></li>         
        </ul>        
    </div>        
    <img src="https://c-ssl.duitang.com/uploads/item/201603/11/20160311104517_3c4ra.thumb.700_0.jpeg" alt="" class="bg slideLeft" id="bg1" />        
    <img src="https://c-ssl.duitang.com/uploads/item/201506/02/20150602171112_MjVQx.thumb.1900_0.jpeg" alt="" class="bg slideBottom" id="bg2" />        
    <img src="https://c-ssl.duitang.com/uploads/item/201710/28/20171028163817_KJGH8.jpeg" alt="" class="bg zoomIn" id="bg3" />        
    <img src="https://b-ssl.duitang.com/uploads/item/201903/16/20190316104400_ui3SK.jpeg" alt="" class="bg zoomOut" id="bg4" />        
    <img src="https://c-ssl.duitang.com/uploads/item/201406/12/20140612202753_u4nG5.thumb.1900_0.jpeg" alt="" class="bg rotate" id="bg5" />    
</body>
</html>


    2
  • 慕数据7136769
    2019-09-05 12:01:01

    <!DOCTYPE HTML><htmllang="en-US">    <head>        <meta charset="UTF-8">     <title>CSS3 Full Background Slider </title>        <style type="text/css">            @importurl("http://www.w3cplus.com/demo/css3/base.css");            @importurl("http://fonts.googleapis.com/css?family=Yesteryear");            html,body {            height: 100%;            }            /*设置背景图片全屏显示，并且居中*/            img.bg {                min-height: 100%;                min-width: 1024px;                width: 100%;                height: auto !important;                height: 100%;                position: fixed;                top: 0;                left: 50%;                z-index:1;                -webkit-transform: translateX(-50%);                -moz-transform: translateX(-50%);                -o-transform: translateX(-50%);                -ms-transform: translateX(-50%);            }            /*设置背景图片从左向右移入显示的动画效果*/            /* Slide Left */                        @-webkit-keyframes 'slideLeft' {             0% { left: -100%; }             100% { left: 50%; }            }            @-moz-keyframes 'slideLeft' {             0% { left: -100%; }             100% { left: 50%; }            }            @-o-keyframes 'slideLeft' {             0% { left: -100%; }             100% { left: 50%; }            }            @-ms-keyframes 'slideLeft' {             0% { left: -100%; }             100% { left: 50%; }            }            @keyframes 'slideLeft' {             0% { left: -100%; }             100% { left: 50%; }            }            /*设置背景图像从底部向顶部移入的动画效果*/             /* Slide Bottom */                        @-webkit-keyframes 'slideBottom' {             0% { top: 350px; }             100% { top: 0; }            }            @-moz-keyframes 'slideBottom' {             0% { top: 350px; }             100% { top: 0; }            }            @-ms-keyframes 'slideBottom' {             0% { top: 350px; }             100% { top: 0; }            }            @-o-keyframes 'slideBottom' {             0% { top: 350px; }             100% { top: 0; }            }            @keyframes 'slideBottom' {             0% { top: 350px; }             100% { top: 0; }            }            /*设置背景图片由小到大放大动画效果*/            /* Zoom In */                        @-webkit-keyframes 'zoomIn' {             0% { -webkit-transform: scale(0.1); }             100% { -webkit-transform: translateX(-50%); }            }            @-moz-keyframes 'zoomIn' {             0% { -moz-transform: scale(0.1); }             100% { -moz-transform: translateX(-50%); }            }            @-ms-keyframes 'zoomIn' {             0% { -ms-transform: scale(0.1); }             100% { -ms-transform: translateX(-50%); }            }            @-o-keyframes 'zoomIn' {             0% { -o-transform: scale(0.1); }             100% { -o-transform: translateX(-50%); }            }            @keyframes 'zoomIn' {             0% { transform: scale(0.1); }             100% { transform: translateX(-50%); }            }            /*设置背景图像由大到小缩小动画效果*/            /* Zoom Out */                        @-webkit-keyframes 'zoomOut' {             0% { -webkit-transform: scale(2); }             100% { -webkit-transform: translateX(-50%); }            }            @-moz-keyframes 'zoomOut' {             0% { -moz-transform: scale(2); }             100% { -moz-transform: translateX(-50%); }            }            @-ms-keyframes 'zoomOut' {             0% { -ms-transform: scale(2); }             100% { -ms-transform: translateX(-50%); }            }            @-o-keyframes 'zoomOut' {             0% { -o-transform: scale(2); }             100% { -o-transform: translateX(-50%); }            }            @keyframes 'zoomOut' {             0% { transform: scale(2); }             100% { transform: translateX(-50%); }            }            /*背景图像旋转出现动画效果*/            /* Rotate */                        @-webkit-keyframes 'rotate' {             0% { -webkit-transform: rotate(-360deg) scale(0.1); }             100% { -webkit-transform: none; left:0; }            }            @-moz-keyframes 'rotate' {             0% { -moz-transform: rotate(-360deg) scale(0.1); }             100% { -moz-transform: none; left:0; }            }            @-ms-keyframes 'rotate' {             0% { -ms-transform: rotate(-360deg) scale(0.1); }             100% { -ms-transform: none; left:0; }            }            @-o-keyframes 'rotate' {             0% { -o-transform: rotate(-360deg) scale(0.1); }             100% { -o-transform: none; left:0; }            }            @keyframes 'rotate' {             0% { transform: rotate(-360deg) scale(0.1); }             100% { transform: none; left:0; }            }            /*设置背景图像不显示动画效果*/            @-webkit-keyframes 'notTarget' {             0% { z-index: 75; }             100% { z-index: 75; }            }            @-moz-keyframes 'notTarget' {             0% { z-index: 75; }             100% { z-index: 75; }            }            @-ms-keyframes 'notTarget' {             0% { z-index: 75; }             100% { z-index: 75; }            }            @-o-keyframes 'notTarget' {             0% { z-index: 75; }             100% { z-index: 75; }            }            @keyframes 'notTarget' {             0% { z-index: 75; }             100% { z-index: 75; }            }                                                .slider {            position: absolute;            width: 100%;            text-align: center;            z-index: 9999;            bottom: 100px;            }            .slider li {            display: inline-block;                        width: 170px;            height: 130px;            margin-right: 15px;            }            .slider a {            display: inline-block;            width: 170px;            padding-top: 70px;            padding-bottom: 20px;            position: relative;            cursor: pointer;            border: 2px solid #fff;            border-radius: 5px;            vertical-align: top;            color: #fff;            text-decoration: none;            font-size: 22px;            font-family: 'Yesteryear', cursive;            text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.8),-2px -2px 1px rgba(0, 0, 0, 0.3),-3px -3px 1px rgba(0, 0, 0, 0.3);            }            /*任务一、设置不同列表的背景色*/            .slider li:nth-of-type(1) a {            background-color: #02646e;            }            .slider li:nth-of-type(2) a {            background-color: #eb0837;            }            .slider li:nth-of-type(3) a {            background-color: #67b374;            }                .slider li:nth-of-type(4) a {            background-color: #e6674a;            }                .slider li:nth-of-type(5) a {            background-color: #e61061;            }            /*任务二、设置缩略图形状*/            .slider li a:after {            content:"";            display: block;            height: 120px;            width: 120px;            border: 5px solid #fff;            border-radius: 50%;            position: absolute;            left: 50%;            margin-left: -60px;            z-index: 9999;            top: -80px;            }            /*任务三、设置缩略图背景图像*/            .slider li:nth-of-type(1) a:after{           background: url(https://c-ssl.duitang.com/uploads/item/201603/11/20160311104517_3c4ra.thumb.700_0.jpeg) no-repeat center;           }           .slider li:nth-of-type(2) a:after{           background: url(https://c-ssl.duitang.com/uploads/item/201506/02/20150602171112_MjVQx.thumb.1900_0.jpeg) no-repeat center;           }           .slider li:nth-of-type(3) a:after{           background: url(https://c-ssl.duitang.com/uploads/item/201710/28/20171028163817_KJGH8.jpeg) no-repeat center;           }           .slider li:nth-of-type(4) a:after{           background: url(https://b-ssl.duitang.com/uploads/item/201903/16/20190316104400_ui3SK.jpeg) no-repeat center;           }           .slider li:nth-of-type(5) a:after{           background: url(https://c-ssl.duitang.com/uploads/item/201406/12/20140612202753_u4nG5.thumb.1900_0.jpeg) no-repeat center;           }            /*任务四、给缩略图添加蒙板效果*/            .slider li a:before {            content:"";            display: block;            height: 120px;            width: 120px;            border: 5px solid #fff;            border-radius: 50%;            position: absolute;            left: 50%;            margin-left: -60px;            z-index: 99999;            top: -80px;            background: rgba(0,0,0,0.3);            }            /*任务五、鼠标悬浮时，修改缩略图蒙板透明度*/            .slider li a:hover:before {            opacity:0;            }            /*任务六、点击缩略图，切换背景图*/            /*背景图从左向右出现*/            #bg1:target {             z-index: 100;             -webkit-animation-name: slideLeft;             -webkit-animation-duration: 1s;             -webkit-animation-iteration-count: 1;             -moz-animation-name: slideLeft;             -moz-animation-duration: 1s;             -moz-animation-iteration-count: 1;             -ms-animation-name: slideLeft;             -ms-animation-duration: 1s;             -ms-animation-iteration-count: 1;             -o-animation-name: slideLeft;             -o-animation-duration: 1s;             -o-animation-iteration-count: 1;             animation-name: slideLeft;             animation-duration: 1s;             animation-iteration-count: 1;            }            /*背景图从下向上出现*/            #bg2:target {             z-index: 100;                         -webkit-animation-name: slideBottom;             -webkit-animation-duration: 1s;             -webkit-animation-iteration-count: 1;             -moz-animation-name: slideBottom;             -moz-animation-duration: 1s;             -moz-animation-iteration-count: 1;             -ms-animation-name: slideBottom;             -ms-animation-duration: 1s;             -ms-animation-iteration-count: 1;             -o-animation-name: slideBottom;             -o-animation-duration: 1s;             -o-animation-iteration-count: 1;            animation-name: slideBottom;             animation-duration: 1s;             animation-iteration-count: 1;            }            /*背景图由小到大出现*/            #bg3:target {             z-index: 100;             -webkit-animation-name: zoomIn;             -webkit-animation-duration: 1s;             -webkit-animation-iteration-count: 1;             -moz-animation-name: zoomIn;             -moz-animation-duration: 1s;             -moz-animation-iteration-count: 1;             -ms-animation-name: zoomIn;             -ms-animation-duration: 1s;             -ms-animation-iteration-count: 1;             -o-animation-name: zoomIn;             -o-animation-duration: 1s;             -o-animation-iteration-count: 1;             animation-name: zoomIn;             animation-duration: 1s;             animation-iteration-count: 1;            }                        /*背景图由大到小出现*/            #bg4:target {             z-index: 100;             -webkit-animation-name: zoomOut;             -webkit-animation-duration: 1s;             -webkit-animation-iteration-count: 1;             -moz-animation-name: zoomOut;             -moz-animation-duration: 1s;             -moz-animation-iteration-count: 1;             -ms-animation-name: zoomOut;             -ms-animation-duration: 1s;             -ms-animation-iteration-count: 1;             -o-animation-name: zoomOut;             -o-animation-duration: 1s;             -o-animation-iteration-count: 1;             animation-name: zoomOut;             animation-duration: 1s;             animation-iteration-count: 1;            }                        /*背景图旋转出现*/            #bg5:target {             z-index: 100;             -webkit-animation-name: rotate;             -webkit-animation-duration: 1s;             -webkit-animation-iteration-count: 1;             -moz-animation-name: rotate;             -moz-animation-duration: 1s;             -moz-animation-iteration-count: 1;             -ms-animation-name: rotate;             -ms-animation-duration: 1s;             -ms-animation-iteration-count: 1;             -o-animation-name: rotate;             -o-animation-duration: 1s;             -o-animation-iteration-count: 1;             animation-name: rotate;             animation-duration: 1s;             animation-iteration-count: 1;            }            /*任务七、设置不显示的背景图层级*/            /* Not Target */                        img:not(:target) {             -webkit-animation-name: notTarget;             -webkit-animation-duration: 1s;             -webkit-animation-iteration-count: 1;             -moz-animation-name: notTarget;             -moz-animation-duration: 1s;             -moz-animation-iteration-count: 1;             -ms-animation-name: notTarget;             -ms-animation-duration: 1s;             -ms-animation-iteration-count: 1;             -o-animation-name: notTarget;             -o-animation-duration: 1s;             -o-animation-iteration-count: 1;             animation-name: notTarget;             animation-duration: 1s;             animation-iteration-count: 1;            }        </style>    </head>    <body>        <div class="slider">            <ul class="clearfix">             <li><a href="#bg1">Hipster Fashion Haircut </a></li>         <li><a href="#bg2">Cloud Computing Services &amp; Consulting</a></li>         <li><a href="#bg3">My haire is sooo fantastic!</a></li>         <li><a href="#bg4">Eat healthy &amp; excersice!</a></li>         <li><a href="#bg5">Lips so kissable I could die ...</a></li>         </ul>        </div>        <img src="https://c-ssl.duitang.com/uploads/item/201603/11/20160311104517_3c4ra.thumb.700_0.jpeg" alt="" class="bg slideLeft" id="bg1" />        <img src="https://c-ssl.duitang.com/uploads/item/201506/02/20150602171112_MjVQx.thumb.1900_0.jpeg" alt="" class="bg slideBottom" id="bg2" />        <img src="https://c-ssl.duitang.com/uploads/item/201710/28/20171028163817_KJGH8.jpeg" alt="" class="bg zoomIn" id="bg3" />        <img src="https://b-ssl.duitang.com/uploads/item/201903/16/20190316104400_ui3SK.jpeg" alt="" class="bg zoomOut" id="bg4" />        <img src="https://c-ssl.duitang.com/uploads/item/201406/12/20140612202753_u4nG5.thumb.1900_0.jpeg" alt="" class="bg rotate" id="bg5" />    </body></html>


    0