? /*任務(wù)一、設(shè)置不同列表的背景色*/
??????????? .slider ul li:nth-of-type(1){
??????????? background-color: #02646e;
??????????? }
??????????? .slider ul li:nth-of-type(2){
??????????? background-color: #eb0837;
??????????? }
??????????? .slider ul li:nth-of-type(3){
??????????? background-color: #67b374;
??????????? }?? ?
??????????? .slider ul li:nth-of-type(4){
??????????? background-color: #e6674a;
??????????? }?? ?
??????????? .slider ul li:nth-of-type(5){
??????????? background-color: #e61061;
??????????? }
??????????? /*任務(wù)二、設(shè)置縮略圖形狀*/
??????????? 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;
??????????? }
??????????? /*任務(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)*/
??????????? .sliderLeft: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)*/
?????????? .sliderBottom: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;
??????????? }