版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進行舉報或認(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)的對稱的,所以用法了變量控制旋轉(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);四、制作鼻子鼻子只是一個橢圓+陰影.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);六:制作耳朵兩個黑色的橢圓,寬高.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等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 2024年適用企業(yè)分期貸款協(xié)議樣式版B版
- 6-3《文氏外孫入村收麥》說課稿及反思 2023-2024學(xué)年統(tǒng)編版高中語文必修上冊
- 2024年跨區(qū)域企業(yè)展期還款協(xié)議書及稅務(wù)影響分析3篇
- 2024年貨物運輸合同詳細(xì)條款與標(biāo)的說明
- 2024影視作品制作合同與分成協(xié)議
- 個人投資合伙經(jīng)營合同范本2024版版B版
- 針灸治療帶狀皰疹經(jīng)驗總結(jié)報告
- 福建省南平市太平中學(xué)2022年高一英語模擬試題含解析
- 2025殘疾人冰雪項目專項基金管理合同3篇
- 2024更新版教師事業(yè)單位聘用協(xié)議范本版B版
- 2023年新澤西駕照筆試題中英對照139題我中文02
- 項目法人(建設(shè)單位)質(zhì)量管理違規(guī)行為分類標(biāo)準(zhǔn)
- 危重癥患者的血糖管理
- 全面設(shè)備管理(TPM)培訓(xùn)資料-課件
- 高中地理《外力作用與地表形態(tài)》優(yōu)質(zhì)課教案、教學(xué)設(shè)計
- 車間生產(chǎn)管理流程圖模板
- 河北省邢臺市各縣區(qū)鄉(xiāng)鎮(zhèn)行政村村莊村名居民村民委員會明細(xì)
- 市場部績效考核表
- 電纜采購技術(shù)要求
- 風(fēng)電場防地震災(zāi)害專項應(yīng)急預(yù)案
- 績效結(jié)果運用辦法
評論
0/150
提交評論