版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡介
1、css如何繪制一只萌萌噠的大熊貓?代碼在這兒:https:/codepen.io/woshilyy/p.html代碼:代碼詳解:一、制作帽子用法邊框制作三角形,用偽類制作帽子上面的小球.hatposition:absolute;border-bottom:150pxsolidred;border-left:75pxsolidtransparent;border-right:75pxsolidtransparent;left:75px;z-index:2;.hat:beforecontent:""position:absolute;width:30px;height:30px
2、;border-radius:50%;background-color:fff;left:-15px;top:-8px;二、制作熊貓臉哈哈哈.faceposition:absolute;width:300px;height:250px;background-color:fff;border-radius:50%;top:133px;三、制作眼睛用法徑向漸變制作,由于兩只眼睛旋轉(zhuǎn)的對(duì)稱的,所以用法了變量控制旋轉(zhuǎn),加了陰影使眼睛更逼真.eyesposition:absolute;width:100px;height:80px;border-radius:50%;transform:rotate(c
3、alc(-60deg*var(-n);.eyesleftleft:10px;top:100px;-n:1;background:radial-gradient(circleat53%72%,fff1px,transparent1px),radial-gradient(circleat50%80%,fff3px,transparent3px),radial-gradient(circleat50%75%,0008px,transparent8px),radial-gradient(circleat50%70%,white15px,transparent15px),000;box-shadow:-
4、3px3px03pxrgba(0,0,0,.1);.eyesrightright:10px;top:100px;-n:-1;background:radial-gradient(circleat45%74%,fff1px,transparent1px),radial-gradient(circleat50%80%,fff3px,transparent3px),radial-gradient(circleat50%75%,0008px,transparent8px),radial-gradient(circleat50%70%,white15px,transparent15px),000;box
5、-shadow:3px3px03pxrgba(0,0,0,.1);四、制作鼻子鼻子只是一個(gè)橢圓+陰影.noseposition:absolute;width:50px;height:20px;background-color:666;border-radius:50%;left:calc(300px-50px)/2);box-shadow:2px2px02pxrgba(0,0,0,.1);bottom:60px;五、制作嘴巴背景色為透亮的圓角矩形+黑色的邊框制作,去掉上邊框.mouthposition:absolute;width:100px;height:20px;background-color:transparent;border-bottom:10pxsolid000;border-radius:77%77%77%/60%60%90%90%;bottom:20px;left:calc(300px-100px)/2);六:制作耳朵兩個(gè)黑色的橢圓,寬高.earposition:absolute;width:100px;height:80px;background-color:000;border-radius:50%;top:141px;transform:rotate(calc(40deg*va
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間,僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請(qǐng)與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 2025年林芝貨運(yùn)從業(yè)資格證模擬考試題庫
- 農(nóng)業(yè)銀行員工激勵(lì)與合規(guī)文化培育
- 信息技術(shù)與小學(xué)寫作教學(xué)的深度融合研究
- 以家庭為基礎(chǔ)的孩子情緒教育創(chuàng)新路徑
- 農(nóng)村家禽養(yǎng)殖的商業(yè)模式創(chuàng)新研究
- 教科版二年級(jí)上冊(cè)科學(xué)期末測試卷及參考答案ab卷
- 健康飲食塑造幸福人生
- 企業(yè)安全文化與員工福利的協(xié)同發(fā)展
- 創(chuàng)新教學(xué)方法在小學(xué)生法治意識(shí)培養(yǎng)中的應(yīng)用
- 從辦公室到自然-企業(yè)員工健康管理的創(chuàng)新方式探索
- 醫(yī)院侵害未成年人案件強(qiáng)制報(bào)告制度培訓(xùn)課件
- 2023年高校財(cái)務(wù)處長述職報(bào)告范文
- 體系年度工作總結(jié)培訓(xùn)課件
- YY/T 0506.6-2009病人、醫(yī)護(hù)人員和器械用手術(shù)單、手術(shù)衣和潔凈服第6部分:阻濕態(tài)微生物穿透試驗(yàn)方法
- GB/T 28799.2-2020冷熱水用耐熱聚乙烯(PE-RT)管道系統(tǒng)第2部分:管材
- 中醫(yī)學(xué)課件八綱辨證(四節(jié))
- GB/T 17991-2009精細(xì)陶瓷術(shù)語
- 林黛玉進(jìn)賈府-圖文
- 武漢大學(xué)2023年623法學(xué)基礎(chǔ)考研真題(回憶版)
- 國家開放大學(xué)建筑結(jié)構(gòu)試驗(yàn)形成性考核冊(cè)答案
- 2023年遼寧省工程咨詢集團(tuán)有限責(zé)任公司校園招聘筆試題庫及答案解析
評(píng)論
0/150
提交評(píng)論