建站
咨询
售后
建站咨询
这篇文章主要介绍“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怎么绘制一只萌萌哒的大熊猫”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！
网页题目：CSS怎么绘制一只萌萌哒的大熊猫
分享链接：http://scpingwu.com/article/ipchsj.html
