摘要:用畫一個(gè)哆啦夢(mèng)雖然說沒用啥什么高級(jí)的技巧,但這讓我感受到了的樂趣好好學(xué)習(xí),天天向上
用css畫一個(gè)哆啦A夢(mèng)?
雖然說沒用啥什么高級(jí)的技巧,但這讓我感受到了CSS的樂趣!
好好學(xué)習(xí),天天向上!
!DOCTYPE html html head title /title style type="text/css" body{ background-color: #66B3FF; height: 300px; overflow: hidden; #head{ width: 200px; height: 200px; position: absolute; left: 50%; top:31%; margin-left: -100px; margin-top: -100px; background-color: #0080FF; border-radius: 999px; border: 1px solid black; #face{ width: 179px; height: 150px; position: absolute; left: 43.4%; top:22%; background-color: white; border-radius: 999px; border: 1px solid black; #leftEye{ width: 50px; height: 60px; position: absolute; left:46.2%; top:18%; background-color: white; border-radius: 50%; border: 1px solid black; #rightEye{ width: 50px; height: 60px; position: absolute; left:50%; top:18%; background-color: white; border-radius: 50%; border: 1px solid black; #leftEye1{ width: 13px; height: 20px; position: absolute; left:48.5%; top:22.2%; background-color: black; border-radius: 50%; border: 1px solid black; #rightEye1{ width: 13px; height: 20px; position: absolute; left:50.5%; top:22.2%; background-color: black; border-radius: 50%; border: 1px solid black; #leftEye2{ width: 5px; height: 8px; position: absolute; left:48.9%; top:23%; background-color: white; border-radius: 50%; border: 1px solid black; #rightEye2{ width: 5px; height: 8px; position: absolute; left:50.7%; top:23%; background-color: white; border-radius: 50%; border: 1px solid black; #nose{ width: 25px; height: 25px; position: absolute; left:49%; top:25.5%; background-color: red; border-radius: 50%; border: 1px solid black; #nose1{ width: 6px; height: 6px; position: absolute; left:49.5%; top:26.5%; background-color: white; border-radius: 50%; #line{ width: 1px; height: 100px; position: absolute; left:49.9%; top:29.7%; background-color: white; border-left: 2px solid #000000; margin-left: 1px; #line1{ width: 60px; height: 1px; position: absolute; left:43.5%; top:28%; background-color: white; border-bottom: 1px solid #000000; margin-left: 1px; transform:rotate(12deg); #line2{ width: 60px; height: 1px; position: absolute; left:43.5%; top:32%; background-color: white; border-bottom: 1px solid #000000; margin-left: 1px; #line3{ width: 60px; height: 1px; position: absolute; left:43.5%; top:36%; background-color: white; border-bottom: 1px solid #000000; margin-left: 1px; transform:rotate(-12deg); #line4{ width: 60px; height: 1px; position: absolute; left:51.6%; top:28%; background-color: white; border-bottom: 1px solid #000000; margin-left: 1px; transform:rotate(-12deg); #line5{ width: 60px; height: 1px; position: absolute; left:51.6%; top:32%; background-color: white; border-bottom: 1px solid #000000; margin-left: 1px; #line6{ width: 60px; height: 1px; position: absolute; left:51.6%; top:36%; background-color: white; border-bottom: 1px solid #000000; margin-left: 1px; transform:rotate(12deg); #mouse{ width: 130px; height: 130px; position: absolute; left: 45.1%; top:30%; margin-left: -0.5px; background-color: white; border-radius: 0 0 65px 65px; border-bottom: 2px solid black; height: 65px; #food{ width: 80px; height: 62px; position: absolute; left:46.9%; top:39.2%; background-color:#FFAF60; border-radius: 50%; border: 1px solid black; #food1{ width: 78px; height: 57px; position: absolute; left:47%; top:38.9%; background-color: #FFAF60; border-radius: 50%; border: 1px solid black; #food2{ width: 73px; height: 52px; position: absolute; left:47.2%; top:39.1%; background-color:#844200; border-radius: 50%; #leftFist{ width: 50px; height: 50px; position: absolute; left:45%; top:40%; margin-left: -15px; margin-top: -15px; background-color: white; border-radius: 999px; border: 1px solid black; #rightFist{ width: 50px; height: 50px; position: absolute; left:53%; top:40%; margin-left: -15px; margin-top: -15px; background-color: white; border-radius: 999px; border: 1px solid black; #leftHand{ width: 50px; height: 70px; position: absolute; left:43.3%; top:44%; margin-left: -15px; margin-top: -15px; background-color: #0080FF; border-radius: 50%; transform:rotate(34deg); border: 1px solid black; #rightHand{ width: 50px; height: 70px; position: absolute; left:54.3%; top:44%; margin-left: -15px; margin-top: -15px; background-color: #0080FF; border-radius: 50%; transform:rotate(-34deg); border: 1px solid black; #tummy{ width: 110px; height: 110px; position: absolute; left: 53.1%; top:58.5%; margin-left: -100px; margin-top: -100px; background-color: white; border-radius: 999px; border: 1px solid black; #bodyy{ width: 135px; height: 115px; position: absolute; left: 44.7%; top:45%; background-color: #0080FF; #cover{ width: 400px; height: 400px; position: absolute; left: 35.3%; top:62.3%; background-color:#66B3FF; border-radius: 50%; #leftLeg{ width: 80px; height: 90px; position: absolute; left:42%; top:53.5%; margin-left: -15px; margin-top: -15px; background-color: white; border-radius: 50%; border: 1px solid black; #rightLeg{ width: 80px; height: 90px; position: absolute; left:53.7%; top:53.5%; margin-left: -15px; margin-top: -15px; background-color: white; border-radius: 50%; border: 1px solid black; #pocket{ width: 88px; height: 82px; position: absolute; left: 46.5%; top:51.6%; margin-left: -0.5px; background-color: white; border-radius: 0 0 41px 41px; border: 1px solid black; height: 41px; /style /head body div id="head" /div div id="face" /div div id="leftEye" /div div id="rightEye" /div div id="leftEye1" /div div id="rightEye1" /div div id="leftEye2" /div div id="rightEye2" /div div id="nose" /div div id="nose1" /div div id="bodyy" /div div id="tummy" /div div id="mouse" /div div id="line" /div div id="line1" /div div id="line2" /div div id="line3" /div div id="line4" /div div id="line5" /div div id="line6" /div div id="food" /div div id="food1" /div div id="food2" /div div id="leftHand" /div div id="rightHand" /div文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/877.html
摘要:用畫一個(gè)哆啦夢(mèng)雖然說沒用啥什么高級(jí)的技巧,但這讓我感受到了的樂趣好好學(xué)習(xí),天天向上用css畫一個(gè)哆啦A夢(mèng) ? 雖然說沒用啥什么高級(jí)的技巧,但這讓我感受到了CSS的樂趣! 好好學(xué)習(xí),天天向上! !DOCTYPE html html head title /title style type=text/css body{ background-c...
最近在學(xué)canvas元素,標(biāo)簽只是圖形容器,必須使用js來繪制圖形。為了增強(qiáng)對(duì)canvas元素的理解,于是用canvas畫了一個(gè)哆啦A夢(mèng)來 要實(shí)現(xiàn)的效果圖 showImg(https://segmentfault.com/img/remote/1460000009319551?w=816&h=1106); 在線預(yù)覽 要想繪畫出這個(gè)哆啦a夢(mèng)首先要掌握以下一些函數(shù): arcTo() canvas繪制...
摘要:灰姑娘灰姑娘灰姑娘不足點(diǎn)擊事件綁定在代碼中,很笨重,下一篇中將做升級(jí)。 前言:在《DOM編程藝術(shù)》一書中,作者給出了一個(gè)實(shí)例:創(chuàng)建一個(gè)圖片庫,其實(shí)功能很簡單,就是點(diǎn)擊某個(gè)列表項(xiàng)時(shí),下方出現(xiàn)相應(yīng)的圖片以及圖片說明(圖片說明事先以title的形式寫在HTML中),雖然是一個(gè)簡單的例子,當(dāng)時(shí)作者在書中循序漸進(jìn),不斷的改善圖片庫中間引入各種知識(shí)點(diǎn),真的是一本好書,在此對(duì)這個(gè)實(shí)例進(jìn)行一些總結(jié)。 ...
摘要:最近在使用做左側(cè)導(dǎo)航的時(shí)候遇到了一點(diǎn)難纏的小問題,由于傳統(tǒng)中標(biāo)簽包裹子元素組成鏈接的思維習(xí)慣,加上標(biāo)簽不能包裹子元素,導(dǎo)航部分一開始采用包裹的結(jié)構(gòu)看起來不錯(cuò),路由跳轉(zhuǎn)正常,然而由于組件全都是行內(nèi)樣式,寫在里的沒有辦法覆蓋掉它,所以。 最近在使用material-ui做左側(cè)導(dǎo)航的時(shí)候遇到了一點(diǎn)難纏的小問題,由于傳統(tǒng)中a標(biāo)簽包裹子元素組成鏈接的思維習(xí)慣,加上MenuItem標(biāo)簽不能包裹子元...
摘要:最近在使用做左側(cè)導(dǎo)航的時(shí)候遇到了一點(diǎn)難纏的小問題,由于傳統(tǒng)中標(biāo)簽包裹子元素組成鏈接的思維習(xí)慣,加上標(biāo)簽不能包裹子元素,導(dǎo)航部分一開始采用包裹的結(jié)構(gòu)看起來不錯(cuò),路由跳轉(zhuǎn)正常,然而由于組件全都是行內(nèi)樣式,寫在里的沒有辦法覆蓋掉它,所以。 最近在使用material-ui做左側(cè)導(dǎo)航的時(shí)候遇到了一點(diǎn)難纏的小問題,由于傳統(tǒng)中a標(biāo)簽包裹子元素組成鏈接的思維習(xí)慣,加上MenuItem標(biāo)簽不能包裹子元...
閱讀 2848·2021-11-16 11:44
閱讀 1002·2021-10-09 09:58
閱讀 4537·2021-09-24 09:48
閱讀 4492·2021-09-23 11:56
閱讀 2436·2021-09-22 15:48
閱讀 1933·2021-09-07 10:07
閱讀 3228·2021-08-31 09:46
閱讀 535·2019-08-30 15:56