为什么点击第二个图片的时候，不会出现第二个图片的效果，求解-慕课网

首页课程实战体系课手记专栏慕课教程

为什么点击第二个图片的时候，不会出现第二个图片的效果，求解

来源：7-8 切换背景图像综合练习题

1993xyh

2015-04-30 14:40

点击第二幅图片的时候，效果不对，有谁可以帮我一下，我的名称叫：1993xyh

写回答关注

1回答

小冷丶

2016-01-19 14:31:49

/*任务一、设置不同列表的背景色*/
.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;
}
/*任务二、设置缩略图形状*/
.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;
}
/*任务三、设置缩略图背景图像*/
.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;
}
/*任务四、给缩略图添加蒙板效果*/
.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);
}
/*任务五、鼠标悬浮时，修改缩略图蒙板透明度*/
.clearfix li a:hover:berfor{
opacity:0;
}
/*任务六、点击综略图，切换背景图*/
/*背景图从左向右出现*/
#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;
}
/*背景图从下向上出现*/
#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;
}
/*背景图由小到大出现*/
#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;
}

/*背景图由大到小出现*/
#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;
}

0 0

十天精通CSS3

本课程为CSS3入门教程，深刻详解CSS3知识让网页穿上绚丽装备

242553 学习 · 2623 问题

查看课程

相似问题

给出的图片第二个计算不对啊

回答 4

点击图片效果

回答 1

连续点某链接两次，为什么第二次点击不会出现动画？

回答 1

为什么第一张缩略图和第二张缩略图没有效果？有什么问题吗

回答 1

这个是不是对找的图片有要求？为什么我的图片不行，我用其他人的图片就可以

回答 1

打开慕课网App查看更多内容