發(fā)不了全部代碼，只能發(fā)這一部分了

????????????/*任務(wù)二、設(shè)置縮略圖形狀*/
????????????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;
????????????}
????????????/*任務(wù)三、設(shè)置縮略圖背景圖像*/
????????????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;
????????????}
????????????/*任務(wù)四、給縮略圖添加蒙板效果*/
????????????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);
????????????}
????????????/*任務(wù)五、鼠標懸浮時，修改縮略圖蒙板透明度*/
????????????a:hover::before{
????????????opacity:0;
????????????}
????????????/*任務(wù)六、點擊綜略圖，切換背景圖*/
????????????/*背景圖從左向右出現(xiàn)*/
??????????????.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;
????????????}
????????????/*背景圖從下向上出現(xiàn)*/
??????????????.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;
????????????}
????????????/*背景圖由小到大出現(xiàn)*/
??????????????.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;
????????????}
????????????
????????????/*背景圖由大到小出現(xiàn)*/
??????????????.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;
????????????}
????????????
????????????/*背景圖旋轉(zhuǎn)出現(xiàn)*/
??????????????.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;
????????????}
????????????/*任務(wù)七、設(shè)置不顯示的背景圖層級*/
????????????/*?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;
??????????????
??????????????}