CSS怎么繪制一只萌萌噠的大熊貓

這篇文章主要介紹“CSS怎么繪制一只萌萌噠的大熊貓”，在日常操作中，相信很多人在CSS怎么繪制一只萌萌噠的大熊貓問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”CSS怎么繪制一只萌萌噠的大熊貓”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

　　html代碼：

　　<pclass="panda">

　　<spanclass="hat"></span>

　　<spanclass="earearL"></span>

　　<spanclass="earearR"></span>

　　<spanclass="face">

　　<spanclass="eyeseyesLeft"></span>

　　<spanclass="eyeseyesRight"></span>

　　<spanclass="nose"></span>

　　<spanclass="mouth"></span>

　　</span>

　　</p>

　　代碼詳解：

　　一、制作帽子

　　使用邊框制作三角形，用偽類制作帽子上面的小球

　　.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)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>