一墩难求,我用CSS画一个冰墩墩送给你

用 css 画了一个冰墩墩

“冰墩墩(英文:Bing Dwen Dwen,汉语拼音:bīng dūn dūn),是 2022 年北京冬季奥运会的吉祥物。将熊猫形象与富有超能量的冰晶外壳相结合,头部外壳造型取自冰雪运动头盔,装饰彩色光环,整体形象酷似航天员。

 —-来自 百度百科

随着 2022 年冬奥会赛事的推进,冬奥吉祥物“冰墩墩”的周边需求暴涨,真是一墩难求。那我就用 CSS 画一个冰墩墩送给你,解解馋。

用 CSS 画了一个冰墩墩,其实 HTML 结构很简单,主要是在 CSS 上下功夫,用得最多的是伪类,圆角,定位。如果有兴趣的同学,可以尝试着自己画一个,如果再用到 CSS3 动画,还有 CSS3 颜色渐变,让冰墩墩动起来,效果会更好哦。

源码如下:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0
    }

    body {
      font: 15px "Microsoft YaHei", Arial, Helvetica, sans-serif;
      background: #d4ebf1;
      color: #000;
    }

    .m_body {
      width: 362px;
      height: 410px;
      border: #393939 8px solid;
      margin: 50px auto;
      border-radius: 88% 88% 62% 68% / 82% 82% 95% 84%;
      position: absolute;
      left: 109px;
      top: -30px;
      background: #fff;
    }

    .ear1,
    .ear2 {
      background: #393939;
      width: 81px;
      height: 115px;
      border-radius: 50%;
      position: absolute;
      z-index: -1;
    }

    .ear1 {
      left: 150px;
      top: 26px;
      transform: rotate(-10deg);
    }

    .ear2 {
      left: 362px;
      top: 28px;
      transform: rotate(10deg);
    }

    .eye1,
    .eye2 {
      background: #393939;
      width: 83px;
      height: 115px;
      border-radius: 50%;
      position: absolute;
    }

    .eye1 {
      left: 185px;
      top: 122px;
      transform: rotate(45deg);
    }

    .eye2 {
      left: 329px;
      top: 122px;
      transform: rotate(-45deg);
    }

    .eye1:before,
    .eye2:before {
      content: "";
      width: 40px;
      height: 40px;
      border: #fff 5px solid;
      border-radius: 100%;
      position: absolute;
    }

    .eye1:before {
      right: 10px;
      top: 22px;
    }

    .eye2:before {
      left: 10px;
      top: 22px;
    }

    .eye1:after,
    .eye2:after {
      content: "";
      width: 10px;
      height: 10px;
      background: #9b9b9b;
      border-radius: 100%;
      position: absolute;
    }

    .eye1:after {
      right: 27px;
      top: 31px;
    }

    .eye2:after {
      left: 41px;
      top: 44px;
    }

    .face {
      position: absolute;
      border-radius: 48% 48% 44% 49%/ 53% 54% 45% 47%;
    }

    .c_blue {
      border: #6bcdf3 5px solid;
      width: 280px;
      height: 224px;
      left: 150px;
      top: 78px;
    }

    .c_red {
      border: #af2350 5px solid;
      width: 287px;
      height: 233px;
      left: 146px;
      top: 73px;
    }

    .c_purple {
      border: #5d75b3 5px solid;
      width: 295px;
      height: 240px;
      left: 142px;
      top: 70px;
    }

    .c_yellow {
      border: #ffc346 5px solid;
      width: 305px;
      height: 248px;
      left: 137px;
      top: 65px;
    }

    .c_green {
      border: #7fcb58 5px solid;
      width: 313px;
      height: 256px;
      left: 133px;
      top: 61px;
    }

    .arm1,
    .arm2 {
      background: #333;
      position: absolute;
      z-index: -1;
    }

    .arm1 {
      width: 75px;
      height: 118px;
      left: 64px;
      top: 244px;
      transform: rotate(45deg);
      border-radius: 24% 69% 68% 76%/ 53% 95% 40% 52%;
    }

    .arm2 {
      width: 75px;
      height: 148px;
      left: 463px;
      top: 162px;
      transform: rotate(37deg);
      border-radius: 56% 62% 98% 6%/ 40% 46% 80% 58%;
    }

    .arm2:before {
      content: "";
      width: 16px;
      height: 24px;
      background: #bc242c;
      position: absolute;
      border-top-left-radius: 50%;
      border-top-right-radius: 50%;
      transform: rotate(45deg);
      left: 32px;
      top: 20px;
    }

    .arm2:after {
      content: "";
      width: 16px;
      height: 24px;
      background: #bc242c;
      position: absolute;
      border-top-left-radius: 50%;
      border-top-right-radius: 50%;
      transform: rotate(-45deg);
      left: 26px;
      top: 20px;
    }

    .arm_c {
      content: "";
      width: 16px;
      height: 24px;
      position: absolute;
      left: 426px;
      top: 20px;
    }

    .nose {
      background-color: #333333;
    }

    .nose:before,
    .nose:after {
      content: '';
      position: absolute;
      background-color: inherit;
    }

    .nose,
    .nose:before,
    .nose:after {
      width: 28px;
      height: 18px;
      border-radius: 42px 42px 60px 61px/ 30px 30px 50px 46px;
    }

    .nose {
      position: absolute;
      left: 284px;
      top: 187px;
    }

    .mouse {
      position: absolute;
      left: 265px;
      top: 205px;
      width: 68px;
      height: 25px;
      border-radius: 48%;
      border: #393939 7px solid;
      border-top: none;
      border-left: 0;
      border-right: 0;
    }

    .leg1,
    .leg2 {
      background: #333;
      position: absolute;
      width: 83px;
      height: 80px;
      border-radius: 0 0 30px 30px;
      z-index: -1;
    }

    .leg1 {
      left: 187px;
      top: 423px;
    }

    .leg2 {
      left: 328px;
      top: 423px;
    }

    .leg1:after,
    .leg2:after {
      content: "";
      width: 43px;
      height: 30px;
      position: absolute;
      background: #363636;
      border-radius: 30px;
    }

    .leg1:after {
      bottom: 0;
      right: -3px;
    }

    .leg2:after {
      bottom: 0;
      left: -3px;
    }
  </style>
</head>

<body>
  <div class="m_body"></div>
  <div class="ear1"></div>
  <div class="ear2"></div>
  <div class="eye1"></div>
  <div class="eye2"></div>
  <div class="face c_blue"></div>
  <div class="face c_red"></div>
  <div class="face c_purple"></div>
  <div class="face c_yellow"></div>
  <div class="face c_green"></div>
  <div class="nose"></div>
  <div class="mouse"></div>
  <div class="arm1"></div>
  <div class="arm2"></div>
  <div class="leg1"></div>
  <div class="leg2"></div>
</body>

</html>

「点点赞赏,手留余香」

4

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 一墩难求,我用CSS画一个冰墩墩送给你

发表回复