发不了全部代码，只能发这一部分了
/*任务二、设置缩略图形状*/
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;
}
/*任务三、设置缩略图背景图像*/
li:nth-of-type(1) a::after{
background: url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg1.jpg) no-repeat center;
}
li:nth-of-type(2) a::after{
background: url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg2.jpg) no-repeat center;
}
li:nth-of-type(3) a::after{
background: url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg3.jpg) no-repeat center;
}
li:nth-of-type(4) a::after{
background: url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg4.jpg) no-repeat center;
}
li:nth-of-type(5) a::after{
background: url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg5.jpg) no-repeat center;
}
/*任务四、给缩略图添加蒙板效果*/
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);
}
/*任务五、鼠标悬浮时，修改缩略图蒙板透明度*/
a:hover::before{
opacity:0;
}
/*任务六、点击综略图，切换背景图*/
/*背景图从左向右出现*/
.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;
}
