温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

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

发布时间:2022-03-10 15:29:08 来源:亿速云 阅读:382 作者:iii 栏目:web开发

这篇文章主要介绍“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怎么绘制一只萌萌哒的大熊猫

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

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css
AI