CSS怎么绘制一只萌萌哒的大熊猫

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

创新互联建站专注于企业全网整合营销推广、网站重做改版、肥西网站定制设计、自适应品牌网站建设、成都h5网站建设、商城网站建设、集团公司官网建设、成都外贸网站制作、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为肥西等各大城市提供网站开发制作服务。

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;

}

到此，关于“CSS怎么绘制一只萌萌哒的大熊猫”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！