Shulou(Shulou.com)06/01 Report--

这篇文章主要介绍"CSS怎么绘制一只萌萌哒的大熊猫"，在日常操作中，相信很多人在CSS怎么绘制一只萌萌哒的大熊猫问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答"CSS怎么绘制一只萌萌哒的大熊猫"的疑惑有所帮助!接下来，请跟着小编一起来学习吧!

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;

}

三、制作眼睛

使用径向渐变制作，因为两只眼睛旋转的对称的，所以使用了变量控制旋转，加了阴影使眼睛更逼真

.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;

}

At this point, the study of "CSS how to draw a cute giant panda" is over, hoping to solve everyone's doubts. Theory and practice can better match to help everyone learn, go and try it! If you want to continue learning more relevant knowledge, please continue to pay attention to the website, Xiaobian will continue to strive to bring more practical articles for everyone!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.