為什么點(diǎn)擊第二個(gè)圖片的時(shí)候，不會(huì)出現(xiàn)第二個(gè)圖片的效果，求解
點(diǎn)擊第二幅圖片的時(shí)候，效果不對(duì)，有誰可以幫我一下，我的名稱叫：1993xyh
1 回答
舉報(bào)
0/150
提交
取消
點(diǎn)擊第二幅圖片的時(shí)候，效果不對(duì)，有誰可以幫我一下，我的名稱叫：1993xyh
2015-04-30
舉報(bào)
2016-01-19
? ? ? ? ? ?/*任務(wù)一、設(shè)置不同列表的背景色*/
? ? ? ? ? ? .clearfix li:nth-of-type(1) a{
? ? ? ? ? ? background-color: #02646e;
? ? ? ? ? ? }
? ? ? ? ? ? .clearfix li:nth-of-type(2) a{
? ? ? ? ? ? background-color: #eb0837;
? ? ? ? ? ? }
? ? ? ? ? ? .clearfix li:nth-of-type(3) a{
? ? ? ? ? ? background-color: #67b374;
? ? ? ? ? ? } ? ?
? ? ? ? ? ? .clearfix li:nth-of-type(4) a{
? ? ? ? ? ? background-color: #e6674a;
? ? ? ? ? ? } ? ?
? ? ? ? ? ? .clearfix li:nth-of-type(5) a{
? ? ? ? ? ? background-color: #e61061;
? ? ? ? ? ? }
? ? ? ? ? ? /*任務(wù)二、設(shè)置縮略圖形狀*/
? ? ? ? ? ? .claerfix li 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: 9999;
? ? ? ? ? ? top: -80px;
? ? ? ? ? ? }
? ? ? ? ? ? /*任務(wù)三、設(shè)置縮略圖背景圖像*/
? ? ? ? ? ? .clearfix li:nth-child(1) a:after{
? ? ? ? ? ? background: url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg1.jpg) no-repeat center;
? ? ? ? ? ? }
? ? ? ? ? ? .clearfix li:nth-child(2) a:after{
? ? ? ? ? ? background: url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg2.jpg) no-repeat center;
? ? ? ? ? ? }
? ? ? ? ? ? .clearfix li:nth-child(3) a:after{
? ? ? ? ? ? background: url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg3.jpg) no-repeat center;
? ? ? ? ? ? }
? ? ? ? ? ? ?.clearfix li:nth-child(4) a:after{
? ? ? ? ? ? background: url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg4.jpg) no-repeat center;
? ? ? ? ? ? }
? ? ? ? ? ? ?.clearfix li:nth-child(5) a:after{
? ? ? ? ? ? background: url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg5.jpg) no-repeat center;
? ? ? ? ? ? }
? ? ? ? ? ? /*任務(wù)四、給縮略圖添加蒙板效果*/
? ? ? ? ? ?.clearfix 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: 99999;
? ? ? ? ? ? top: -80px;
? ? ? ? ? ? background: rgba(0,0,0,0.3);
? ? ? ? ? ? }
? ? ? ? ? ? /*任務(wù)五、鼠標(biāo)懸浮時(shí)，修改縮略圖蒙板透明度*/
? ? ? ? ? ? .clearfix li a:hover:berfor{
? ? ? ? ? ? opacity:0;
? ? ? ? ? ? }
? ? ? ? ? ? /*任務(wù)六、點(diǎn)擊綜略圖，切換背景圖*/
? ? ? ? ? ? /*背景圖從左向右出現(xiàn)*/
? ? ? ? ? ? ?#bg1: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)*/
? ? ? ? ? ?#bg2: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)*/
? ? ? ? ? ? #bg3: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)*/
? ? ? ? ? ? #bg4: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;
? ? ? ? ? ? }