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;

　　}

　　三、制作眼睛

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

　　.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怎么绘制一只萌萌哒的大熊猫”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！