課程
/前端開發(fā)
/HTML/CSS
/十天精通CSS3
點擊第二幅圖片的時候，效果不對，有誰可以幫我一下，我的名稱叫：1993xyh
2015-04-30
源自：十天精通CSS3 7-8
正在回答
? ? ? ? ? ?/*任務一、設置不同列表的背景色*/
? ? ? ? ? ? .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 {
? ? ? ? ? ? z-index: 99999;
? ? ? ? ? ? background: rgba(0,0,0,0.3);
? ? ? ? ? ? /*任務五、鼠標懸浮時，修改縮略圖蒙板透明度*/
? ? ? ? ? ? .clearfix li a:hover:berfor{
? ? ? ? ? ? opacity:0;
? ? ? ? ? ? /*任務六、點擊綜略圖，切換背景圖*/
? ? ? ? ? ? /*背景圖從左向右出現(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{
? ? ? ? ? ??
? ? ? ? ? ? ?-webkit-animation-name: slideBottom;
? ? ? ? ? ? ?-moz-animation-name: slideBottom;
? ? ? ? ? ? ?-ms-animation-name: slideBottom;
? ? ? ? ? ? ?-o-animation-name: slideBottom;
? ? ? ? ? ? animation-name: slideBottom;
? ? ? ? ? ? /*背景圖由小到大出現(xiàn)*/
? ? ? ? ? ? #bg3:target{
? ? ? ? ? ? ?-webkit-animation-name: zoomIn;
? ? ? ? ? ? ?-moz-animation-name: zoomIn;
? ? ? ? ? ? ?-ms-animation-name: zoomIn;
? ? ? ? ? ? ?-o-animation-name: zoomIn;
? ? ? ? ? ? ?animation-name: zoomIn;
? ? ? ? ? ? /*背景圖由大到小出現(xiàn)*/
? ? ? ? ? ? #bg4:target{
? ? ? ? ? ? ?-webkit-animation-name: zoomOut;
? ? ? ? ? ? ?-moz-animation-name: zoomOut;
? ? ? ? ? ? ?-ms-animation-name: zoomOut;
? ? ? ? ? ? ?-o-animation-name: zoomOut;
? ? ? ? ? ? ?animation-name: zoomOut;
舉報
本課程為CSS3入門教程，深刻詳解CSS3知識讓網頁穿上絢麗裝備
4 回答給出的圖片第二個計算不對啊
1 回答點擊圖片效果
1 回答連續(xù)點某鏈接兩次，為什么第二次點擊不會出現(xiàn)動畫？
1 回答為什么第一張縮略圖和第二張縮略圖沒有效果？有什么問題嗎
1 回答這個是不是對找的圖片有要求？為什么我的圖片不行，我用其他人的圖片就可以
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2016-01-19
? ? ? ? ? ?/*任務一、設置不同列表的背景色*/
? ? ? ? ? ? .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;
? ? ? ? ? ? }
? ? ? ? ? ? /*任務六、點擊綜略圖，切換背景圖*/
? ? ? ? ? ? /*背景圖從左向右出現(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;
? ? ? ? ? ? }