为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

正在回答

2 回答

           /*任务一、设置不同列表的背景色*/

            .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/150
提交
取消

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

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信