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

自己在网上找的图片，代码可行，供大家参考。

<!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: -500px; }

               100% { left: 0; }

           }

           @-moz-keyframes 'slideLeft' {

               0% { left: -500px; }

               100% { left: 0; }

           }

           @-o-keyframes 'slideLeft' {

               0% { left: -500px; }

               100% { left: 0; }

           }

           @-ms-keyframes 'slideLeft' {

               0% { left: -500px; }

               100% { left: 0; }

           }

           @keyframes 'slideLeft' {

               0% { left: -500px; }

               100% { left: 0; }

           }

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

            /* 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: none; }

           }

           @-moz-keyframes 'zoomIn' {

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

               100% { -moz-transform: none; }

           }

           @-ms-keyframes 'zoomIn' {

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

               100% { -ms-transform: none; }

           }

           @-o-keyframes 'zoomIn' {

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

               100% { -o-transform: none; }

           }

           @keyframes 'zoomIn' {

               0% { transform: scale(0.1); }

               100% { transform: none; }

           }

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

           /* Zoom Out */

           

           @-webkit-keyframes 'zoomOut' {

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

               100% { -webkit-transform: none; }

           }

           @-moz-keyframes 'zoomOut' {

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

               100% { -moz-transform: none; }

           }

           @-ms-keyframes 'zoomOut' {

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

               100% { -ms-transform: none; }

           }

           @-o-keyframes 'zoomOut' {

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

               100% { -o-transform: none; }

           }

           @keyframes 'zoomOut' {

               0% { transform: scale(2); }

               100% { transform: none; }

           }

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

           /* Rotate */

           

           @-webkit-keyframes 'rotate' {

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

               100% { -webkit-transform: none; }

           }

           @-moz-keyframes 'rotate' {

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

               100% { -moz-transform: none; }

           }

           @-ms-keyframes 'rotate' {

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

               100% { -ms-transform: none; }

           }

           @-o-keyframes 'rotate' {

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

               100% { -o-transform: none; }

           }

           @keyframes 'rotate' {

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

               100% { transform: none; }

           }

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

           @-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://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2927464136,30546800&fm=15&gp=0.jpg) no-repeat center;

           }

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

           background: url(https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=135197569,3162678290&fm=15&gp=0.jpg) no-repeat center;

           }

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

           background: url(https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2761419731,1583069470&fm=27&gp=0.jpg) no-repeat center;

           }

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

           background: url(https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1800437085,3697988398&fm=27&gp=0.jpg) no-repeat center;

           }

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

           background: url(https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2547491788,3355958735&fm=27&gp=0.jpg) 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://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2927464136,30546800&fm=15&gp=0.jpg" alt="" class="bg slideLeft" id="bg1" />

       <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=135197569,3162678290&fm=15&gp=0.jpg" alt="" class="bg slideBottom" id="bg2" />

       <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2761419731,1583069470&fm=27&gp=0.jpg" alt="" class="bg zoomIn" id="bg3" />

       <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1800437085,3697988398&fm=27&gp=0.jpg" alt="" class="bg zoomOut" id="bg4" />

       <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2547491788,3355958735&fm=27&gp=0.jpg" alt="" class="bg rotate" id="bg5" />

   </body>

</html>


提问者：风起临冬 2018-08-09 11:51

个回答

  • qq_Material_0
    2018-08-16 20:45:46
    已采纳

    同学的代码点赞最高的那个还不如你这个，只能说你这个写的非常好了，要是背景大图切换起来顺畅那就更好了！不错哟！

    0
  • weixin_慕容6229135
    2021-01-24 18:35:11

    为什么我照着写的zoomin 和zoomout效果好奇怪啊，rotate也不转?

    0
  • LuckyCH
    2019-07-24 17:42:38

    谢谢分享

    0
  • 慕容818178
    2019-03-24 21:30:50

    要为你评论加点赞，让更多的人看到，太棒了

    0
  • qq_Icantforgeti_0
    2019-02-07 22:00:04

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

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

    这两个网址是找不到的了吗


    0
  • qq_慕盖茨8361330
    2019-01-18 15:49:31

    感谢了 这个代码 方便了许多

    0
  • vcfriend
    2018-10-25 07:30:34

    太棒了,感恩分享...图片显示效果非常好看...

    0
  • qq_嗜爱_mszAI9
    2018-10-24 21:21:44

    好厉害啊！！！

    大佬

    0
  • 四手科学家
    2018-10-24 15:15:37

    很好，谢谢了

    0
  • 天空之城_rtzCKL
    2018-10-18 10:26:43

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

    选择那个ID标签是有问题的，点击除缩略图外的小方块也能切换大图，应该使用 .slideLeft:target ; .slideBottom:target  .......

    0