7-8 切换背景图像综合练习题
本节编程练习不计算学习进度，请电脑登录imooc.com操作

切换背景图像综合练习题

同学们，根据所学知识，使用CSS3知识，实现背景图片的切换效果（不依赖js，点击小图切换大的背景图）

任务

给每个列表定义不同的背景颜色

提示：使用结构伪类选择器:nth-of-type()

设置缩略图外形效果

提示：使用伪元素::after制作圆形效果

1、给每个缩略图设置不同的图片

提示：使用伪结构选择器:nth-of-type()，并且配合::after

2、给每个缩略图添加透明度蒙板效果

提示：使用伪类选择器::before给缩略图添加蒙板效果

3、鼠标悬浮在缩略图上时，修改缩略图上蒙板的透明度

提示：通过:hover和::before配合修改opacity的值为0

4、点击缩略图，切换背景图片

提示：通过目标选择器:target进行背景图片的切换

5、控制不是被点击图片的层级大小，让其不显示

提示：通过“否定选择器:not()”和“目标选择器:target”来控制不是被切换的背景图像不显示
index.html 
  1. <!DOCTYPE HTML>
  2. <htmllang="en-US">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.     	<title>CSS3 Full Background Slider </title>
  6.         <style type="text/css">
  7.             @importurl("http://www.w3cplus.com/demo/css3/base.css");
  8.             @importurl("http://fonts.googleapis.com/css?family=Yesteryear");
  9.             html,body {
  10.             height: 100%;
  11.             }
  12.             /*设置背景图片全屏显示，并且居中*/
  13.             img.bg {
  14.             min-height: 100%;
  15.             min-width: 1024px;
  16.             width: 100%;
  17.             height: auto !important;
  18.             height: 100%;
  19.             position: fixed;
  20.             top: 0;
  21.             left: 50%;
  22.             z-index:1;
  23.               -webkit-transform: translateX(-50%);
  24.               -moz-transform: translateX(-50%);
  25.               -o-transform: translateX(-50%);
  26.               -ms-transform: translateX(-50%);
  27.             }
  28.             /*设置背景图片从左向右移入显示的动画效果*/
  29.             /* Slide Left */
  30.  
  31.             @-webkit-keyframes 'slideLeft' {
  32.             	0% { left: -500px; }
  33.             	100% { left: 0; }
  34.             }
  35.             @-moz-keyframes 'slideLeft' {
  36.             	0% { left: -500px; }
  37.             	100% { left: 0; }
  38.             }
  39.             @-o-keyframes 'slideLeft' {
  40.             	0% { left: -500px; }
  41.             	100% { left: 0; }
  42.             }
  43.             @-ms-keyframes 'slideLeft' {
  44.             	0% { left: -500px; }
  45.             	100% { left: 0; }
  46.             }
  47.             @keyframes 'slideLeft' {
  48.             	0% { left: -500px; }
  49.             	100% { left: 0; }
  50.             }
  51.             /*设置背景图像从底部向顶部移入的动画效果*/
  52.              /* Slide Bottom */
  53.  
  54.             @-webkit-keyframes 'slideBottom' {
  55.             	0% { top: 350px; }
  56.             	100% { top: 0; }
  57.             }
  58.             @-moz-keyframes 'slideBottom' {
  59.             	0% { top: 350px; }
  60.             	100% { top: 0; }
  61.             }
  62.             @-ms-keyframes 'slideBottom' {
  63.             	0% { top: 350px; }
  64.             	100% { top: 0; }
  65.             }
  66.             @-o-keyframes 'slideBottom' {
  67.             	0% { top: 350px; }
  68.             	100% { top: 0; }
  69.             }
  70.             @keyframes 'slideBottom' {
  71.             	0% { top: 350px; }
  72.             	100% { top: 0; }
  73.             }
  74.             /*设置背景图片由小到大放大动画效果*/
  75.             /* Zoom In */
  76.  
  77.             @-webkit-keyframes 'zoomIn' {
  78.             	0% { -webkit-transform: scale(0.1); }
  79.             	100% { -webkit-transform: none; }
  80.             }
  81.             @-moz-keyframes 'zoomIn' {
  82.             	0% { -moz-transform: scale(0.1); }
  83.             	100% { -moz-transform: none; }
  84.             }
  85.             @-ms-keyframes 'zoomIn' {
  86.             	0% { -ms-transform: scale(0.1); }
  87.             	100% { -ms-transform: none; }
  88.             }
  89.             @-o-keyframes 'zoomIn' {
  90.             	0% { -o-transform: scale(0.1); }
  91.             	100% { -o-transform: none; }
  92.             }
  93.             @keyframes 'zoomIn' {
  94.             	0% { transform: scale(0.1); }
  95.             	100% { transform: none; }
  96.             }
  97.             /*设置背景图像由大到小缩小动画效果*/
  98.             /* Zoom Out */
  99.  
  100.             @-webkit-keyframes 'zoomOut' {
  101.             	0% { -webkit-transform: scale(2); }
  102.             	100% { -webkit-transform: none; }
  103.             }
  104.             @-moz-keyframes 'zoomOut' {
  105.             	0% { -moz-transform: scale(2); }
  106.             	100% { -moz-transform: none; }
  107.             }
  108.             @-ms-keyframes 'zoomOut' {
  109.             	0% { -ms-transform: scale(2); }
  110.             	100% { -ms-transform: none; }
  111.             }
  112.             @-o-keyframes 'zoomOut' {
  113.             	0% { -o-transform: scale(2); }
  114.             	100% { -o-transform: none; }
  115.             }
  116.             @keyframes 'zoomOut' {
  117.             	0% { transform: scale(2); }
  118.             	100% { transform: none; }
  119.             }
  120.             /*背景图像旋转出现动画效果*/
  121.             /* Rotate */
  122.  
  123.             @-webkit-keyframes 'rotate' {
  124.             	0% { -webkit-transform: rotate(-360deg) scale(0.1); }
  125.             	100% { -webkit-transform: none; }
  126.             }
  127.             @-moz-keyframes 'rotate' {
  128.             	0% { -moz-transform: rotate(-360deg) scale(0.1); }
  129.             	100% { -moz-transform: none; }
  130.             }
  131.             @-ms-keyframes 'rotate' {
  132.             	0% { -ms-transform: rotate(-360deg) scale(0.1); }
  133.             	100% { -ms-transform: none; }
  134.             }
  135.             @-o-keyframes 'rotate' {
  136.             	0% { -o-transform: rotate(-360deg) scale(0.1); }
  137.             	100% { -o-transform: none; }
  138.             }
  139.             @keyframes 'rotate' {
  140.             	0% { transform: rotate(-360deg) scale(0.1); }
  141.             	100% { transform: none; }
  142.             }
  143.             /*设置背景图像不显示动画效果*/
  144.             @-webkit-keyframes 'notTarget' {
  145.             	0% { z-index: 75; }
  146.             	100% { z-index: 75; }
  147.             }
  148.             @-moz-keyframes 'notTarget' {
  149.             	0% { z-index: 75; }
  150.             	100% { z-index: 75; }
  151.             }
  152.             @-ms-keyframes 'notTarget' {
  153.             	0% { z-index: 75; }
  154.             	100% { z-index: 75; }
  155.             }
  156.             @-o-keyframes 'notTarget' {
  157.             	0% { z-index: 75; }
  158.             	100% { z-index: 75; }
  159.             }
  160.             @keyframes 'notTarget' {
  161.             	0% { z-index: 75; }
  162.             	100% { z-index: 75; }
  163.             }
  164.  
  165.  
  166.  
  167.             .slider {
  168.             position: absolute;
  169.             width: 100%;
  170.             text-align: center;
  171.             z-index: 9999;
  172.             bottom: 100px;
  173.             }
  174.             .slider li {
  175.             display: inline-block;
  176.             width: 170px;
  177.             height: 130px;
  178.             margin-right: 15px;
  179.             }
  180.             .slider a {
  181.             display: inline-block;
  182.             width: 170px;
  183.             padding-top: 70px;
  184.             padding-bottom: 20px;
  185.             position: relative;
  186.             cursor: pointer;
  187.             border: 2px solid #fff;
  188.             border-radius: 5px;
  189.             vertical-align: top;
  190.             color: #fff;
  191.             text-decoration: none;
  192.             font-size: 22px;
  193.             font-family: 'Yesteryear', cursive;
  194.             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);
  195.             }
  196.             /*任务一、设置不同列表的背景色*/
  197.             写入正确选择器{
  198.             background-color: #02646e;
  199.             }
  200.             写入正确选择器{
  201.             background-color: #eb0837;
  202.             }
  203.             写入正确选择器{
  204.             background-color: #67b374;
  205.             }    
  206.             写入正确选择器{
  207.             background-color: #e6674a;
  208.             }    
  209.             写入正确选择器{
  210.             background-color: #e61061;
  211.             }
  212.             /*任务二、设置缩略图形状*/
  213.             写入正确选择器{
  214.             content:"";
  215.             display: block;
  216.             height: 120px;
  217.             width: 120px;
  218.             border: 5px solid #fff;
  219.             border-radius: 50%;
  220.             position: absolute;
  221.             left: 50%;
  222.             margin-left: -60px;
  223.             z-index: 9999;
  224.             top: -80px;
  225.             }
  226.             /*任务三、设置缩略图背景图像*/
  227.             写入正确选择器{
  228.             background: url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg1.jpg) no-repeat center;
  229.             }
  230.             写入正确选择器{
  231.             background: url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg2.jpg) no-repeat center;
  232.             }
  233.             写入正确选择器{
  234.             background: url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg3.jpg) no-repeat center;
  235.             }
  236.             写入正确选择器{
  237.             background: url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg4.jpg) no-repeat center;
  238.             }
  239.             写入正确选择器{
  240.             background: url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg5.jpg) no-repeat center;
  241.             }
  242.             /*任务四、给缩略图添加蒙板效果*/
  243.             写入正确选择器{
  244.             content:"";
  245.             display: block;
  246.             height: 120px;
  247.             width: 120px;
  248.             border: 5px solid #fff;
  249.             border-radius: 50%;
  250.             position: absolute;
  251.             left: 50%;
  252.             margin-left: -60px;
  253.             z-index: 99999;
  254.             top: -80px;
  255.             background: rgba(0,0,0,0.3);
  256.             }
  257.             /*任务五、鼠标悬浮时，修改缩略图蒙板透明度*/
  258.             写入正确选择器{
  259.             opacity:0;
  260.             }
  261.             /*任务六、点击综略图，切换背景图*/
  262.             /*背景图从左向右出现*/
  263.             写入正确选择器{
  264.             	z-index: 100;
  265.             	-webkit-animation-name: slideLeft;
  266.             	-webkit-animation-duration: 1s;
  267.             	-webkit-animation-iteration-count: 1;
  268.             	-moz-animation-name: slideLeft;
  269.             	-moz-animation-duration: 1s;
  270.             	-moz-animation-iteration-count: 1;
  271.             	-ms-animation-name: slideLeft;
  272.             	-ms-animation-duration: 1s;
  273.             	-ms-animation-iteration-count: 1;
  274.             	-o-animation-name: slideLeft;
  275.             	-o-animation-duration: 1s;
  276.             	-o-animation-iteration-count: 1;
  277.             	animation-name: slideLeft;
  278.             	animation-duration: 1s;
  279.             	animation-iteration-count: 1;
  280.             }
  281.             /*背景图从下向上出现*/
  282.             写入正确选择器{
  283.             	z-index: 100;
  284.  
  285.             	-webkit-animation-name: slideBottom;
  286.             	-webkit-animation-duration: 1s;
  287.             	-webkit-animation-iteration-count: 1;
  288.             	-moz-animation-name: slideBottom;
  289.             	-moz-animation-duration: 1s;
  290.             	-moz-animation-iteration-count: 1;
  291.             	-ms-animation-name: slideBottom;
  292.             	-ms-animation-duration: 1s;
  293.             	-ms-animation-iteration-count: 1;
  294.             	-o-animation-name: slideBottom;
  295.             	-o-animation-duration: 1s;
  296.             	-o-animation-iteration-count: 1;
  297.             animation-name: slideBottom;
  298.             	animation-duration: 1s;
  299.             	animation-iteration-count: 1;
  300.             }
  301.             /*背景图由小到大出现*/
  302.             写入正确选择器{
  303.             	z-index: 100;
  304.             	-webkit-animation-name: zoomIn;
  305.             	-webkit-animation-duration: 1s;
  306.             	-webkit-animation-iteration-count: 1;
  307.             	-moz-animation-name: zoomIn;
  308.             	-moz-animation-duration: 1s;
  309.             	-moz-animation-iteration-count: 1;
  310.             	-ms-animation-name: zoomIn;
  311.             	-ms-animation-duration: 1s;
  312.             	-ms-animation-iteration-count: 1;
  313.             	-o-animation-name: zoomIn;
  314.             	-o-animation-duration: 1s;
  315.             	-o-animation-iteration-count: 1;
  316.             	animation-name: zoomIn;
  317.             	animation-duration: 1s;
  318.             	animation-iteration-count: 1;
  319.             }
  320.  
  321.             /*背景图由大到小出现*/
  322.             写入正确选择器{
  323.             	z-index: 100;
  324.             	-webkit-animation-name: zoomOut;
  325.             	-webkit-animation-duration: 1s;
  326.             	-webkit-animation-iteration-count: 1;
  327.             	-moz-animation-name: zoomOut;
  328.             	-moz-animation-duration: 1s;
  329.             	-moz-animation-iteration-count: 1;
  330.             	-ms-animation-name: zoomOut;
  331.             	-ms-animation-duration: 1s;
  332.             	-ms-animation-iteration-count: 1;
  333.             	-o-animation-name: zoomOut;
  334.             	-o-animation-duration: 1s;
  335.             	-o-animation-iteration-count: 1;
  336.             	animation-name: zoomOut;
  337.             	animation-duration: 1s;
  338.             	animation-iteration-count: 1;
  339.             }
  340.  
  341.             /*背景图旋转出现*/
  342.             写入正确选择器{
  343.             	z-index: 100;
  344.             	-webkit-animation-name: rotate;
  345.             	-webkit-animation-duration: 1s;
  346.             	-webkit-animation-iteration-count: 1;
  347.             	-moz-animation-name: rotate;
  348.             	-moz-animation-duration: 1s;
  349.             	-moz-animation-iteration-count: 1;
  350.             	-ms-animation-name: rotate;
  351.             	-ms-animation-duration: 1s;
  352.             	-ms-animation-iteration-count: 1;
  353.             	-o-animation-name: rotate;
  354.             	-o-animation-duration: 1s;
  355.             	-o-animation-iteration-count: 1;
  356.             	animation-name: rotate;
  357.             	animation-duration: 1s;
  358.             	animation-iteration-count: 1;
  359.             }
  360.             /*任务七、设置不显示的背景图层级*/
  361.             /* Not Target */
  362.  
  363.             写入正确选择器{
  364.             	-webkit-animation-name: notTarget;
  365.             	-webkit-animation-duration: 1s;
  366.             	-webkit-animation-iteration-count: 1;
  367.             	-moz-animation-name: notTarget;
  368.             	-moz-animation-duration: 1s;
  369.             	-moz-animation-iteration-count: 1;
  370.             	-ms-animation-name: notTarget;
  371.             	-ms-animation-duration: 1s;
  372.             	-ms-animation-iteration-count: 1;
  373.             	-o-animation-name: notTarget;
  374.             	-o-animation-duration: 1s;
  375.             	-o-animation-iteration-count: 1;
  376.             	animation-name: notTarget;
  377.             	animation-duration: 1s;
  378.             	animation-iteration-count: 1;
  379.             }
  380.         </style>
  381.     </head>
  382.     <body>
  383.         <div class="slider">
  384.             <ul class="clearfix">
  385.             	<li><a href="#bg1">Hipster Fashion Haircut </a></li>
  386.         		<li><a href="#bg2">Cloud Computing Services &amp; Consulting</a></li>
  387.         		<li><a href="#bg3">My haire is sooo fantastic!</a></li>
  388.         		<li><a href="#bg4">Eat healthy &amp; excersice!</a></li>
  389.         		<li><a href="#bg5">Lips so kissable I could die ...</a></li>
  390.         	</ul>
  391.         </div>
  392.         <img src="http://www.w3cplus.com/demo/css3/CSS3Fullbackground/bg1.jpg" alt="" class="bg slideLeft" id="bg1" />
  393.         <img src="http://www.w3cplus.com/demo/css3/CSS3Fullbackground/bg2.jpg" alt="" class="bg slideBottom" id="bg2" />
  394.         <img src="http://www.w3cplus.com/demo/css3/CSS3Fullbackground/bg3.jpg" alt="" class="bg zoomIn" id="bg3" />
  395.         <img src="http://www.w3cplus.com/demo/css3/CSS3Fullbackground/bg4.jpg" alt="" class="bg zoomOut" id="bg4" />
  396.         <img src="http://www.w3cplus.com/demo/css3/CSS3Fullbackground/bg5.jpg" alt="" class="bg rotate" id="bg5" />
  397.     </body>
  398. </html>
下一节