這篇文章主要介紹“CSS怎么繪制一只萌萌噠的大熊貓”，在日常操作中，相信很多人在CSS怎么繪制一只萌萌噠的大熊貓問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”CSS怎么繪制一只萌萌噠的大熊貓”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
創(chuàng)新互聯(lián)建站專注于企業(yè)全網(wǎng)整合營銷推廣、網(wǎng)站重做改版、肥西網(wǎng)站定制設(shè)計、自適應(yīng)品牌網(wǎng)站建設(shè)、成都h5網(wǎng)站建設(shè)、商城網(wǎng)站建設(shè)、集團公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計等建站業(yè)務(wù)，價格優(yōu)惠性價比高，為肥西等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。
html代碼：
代碼詳解：
一、制作帽子
使用邊框制作三角形，用偽類制作帽子上面的小球
.hat{
position:absolute;
border-bottom:150pxsolidred;
border-left:75pxsolidtransparent;
border-right:75pxsolidtransparent;
left:75px;
z-index:2;
}
.hat::before{
content:"";
position:absolute;
width:30px;
height:30px;
border-radius:50%;
background-color:#fff;
left:-15px;
top:-8px;
}
二、制作熊貓臉哈哈哈
.face{
position:absolute;
width:300px;
height:250px;
background-color:#fff;
border-radius:50%;
top:133px;
}
三、制作眼睛
使用徑向漸變制作，因為兩只眼睛旋轉(zhuǎn)的對稱的，所以使用了變量控制旋轉(zhuǎn)，加了陰影使眼睛更逼真
.eyes{
position:absolute;
width:100px;
height:80px;
border-radius:50%;
transform:rotate(calc(-60deg*var(--n)));
}
.eyesLeft{
left: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:-3px3px03pxrgba(0,0,0,.1);
}
.eyesRight{
right: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-shadow:3px3px03pxrgba(0,0,0,.1);
}
四、制作鼻子
鼻子只是一個橢圓+陰影
.nose{
position: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;
}
五、制作嘴巴
背景色為透明的圓角矩形+黑色的邊框制作，去掉上邊框
.mouth{
position:absolute;
width:100px;
height:20px;
background-color:transparent;
border-bottom:10pxsolid#000;
border-radius:77%77%77%/60%60%90%90%;
bottom:20px;
left:calc((300px-100px)/2);
}
六：制作耳朵
兩個黑色的橢圓，寬>高
.ear{
position:absolute;
width:100px;
height:80px;
background-color:#000;
border-radius:50%;
top:141px;
transform:rotate(calc(40deg*var(--e)));
}
.earL{
--e:1;
left:0;
}
.earR{
--e:-1;
right:0;
}
到此，關(guān)于“CSS怎么繪制一只萌萌噠的大熊貓”的學習就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
文章標題：CSS怎么繪制一只萌萌噠的大熊貓
鏈接URL：http://weahome.cn/article/ipchsj.html
重慶分公司
重慶分公司
