和任务六做完相比较，并没有任何区别啊

       
       
            /*任务六、点击综略图，切换背景图*/
            /*背景图从左向右出现*/
            .slideLeft: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;
            }
            /*背景图从下向上出现*/
           .slideBottom: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;
            }
            /*背景图由小到大出现*/
            .zoomIn: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;
            }
            
            /*背景图由大到小出现*/
            .zoomOut: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;
            }
            
            /*背景图旋转出现*/
            .rotate: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 */
            
             .bg: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;
            }