CSS+HTML绘制2022年北京冬奥会吉祥物冰墩墩

用户9999906

发布于 2022-09-26 11:38:29

2560

发布于 2022-09-26 11:38:29

文章被收录于专栏：学编程的GISer

只用css和html，20行代码能不能画出一个冰墩墩？答案是能（嘻嘻），看代码：

 1<!DOCTYPE html>
 2<html lang="en">
 3  <head>
 4    <meta charset="UTF-8" />
 5    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7    <title>Document</title>
 8    <style>
 9      div {
10        height: 630px;
11        width: 500px;
12        background-image: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ffile.zhihuimami.com%2F201907%2F20211111120554709.jpg%3Fx-oss-process%3Dstyle%2Fcontent_800&refer=http%3A%2F%2Ffile.zhihuimami.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1653303838&t=dbe863623d1f609a94bd809ae088015c);
13        background-size: 500px 630px;
14      }
15    </style>
16  </head>
17  <body>
18    <div></div>
19  </body>
20</html>

看到这可能有人要骂我了😜，好了，不闹了，看下边的正经代码吧：

CSS+HTML绘制北京冬奥会吉祥物冰墩墩：

html代码：

<body>
  <!-- 版权所有：公众号：学编程的GISer -->
  <!-- 这里墩墩的嘴有两个样式，删掉dundun.css文件中最后三个类选择器即可看到另外一个样式啦！ -->
  <div class="bingdundun">
    <div class="body"></div>
    <div class="nose"></div>
    <div class="mouth"></div>
    <div class="left-eye"></div>
    <div class="right-eye"></div>
    <!-- 左眼白： -->
    <div class="left-eyeWithe">
      <div class="left-circle"><div class="left-point"></div></div>
    </div>
    <!-- 右眼白： -->
    <div class="right-eyeWithe">
      <div class="right-circle"><div class="right-point"></div></div>
    </div>
    <div class="face"></div>
    <div class="left-hand">学编程的GISer</div>
    <div class="left-arm"></div>
    <div class="left-ear"></div>
    <div class="right-ear"></div>
    <div class="left-foot"></div>
    <div class="right-foot"></div>
    <div class="right-armandhand"></div>
    <div class="right-hand-heart"></div>
    <div class="mouth-beauty"></div>
    <div class="tongue"></div>
    <!-- 奥运五环： -->
    <div class="five-Olympic-Rings">
      <div class="first"></div>
      <div class="second"></div>
      <div class="thrid"></div>
      <div class="forth"></div>
      <div class="fifth"></div>
    </div>
    <!-- 北京2022： -->
    <div class="beijing2022">BEIJING2022</div>
    <!-- 2022北京冬奥会标志： -->
    <div class="logo"></div>
  </div>
</body>

css代码：

/* 版权所有：公众号：学编程的GISer */
body {
  background-color: #66d9ff;
}
/* 整个冰墩墩外边的大div: */
.bingdundun {
  position: absolute;
  top: 60px;
  left: 500px;
}
/* 身体： */
.body {
  height: 470px;
  width: 408px;
  background-color: #ffffff;
  box-sizing: border-box;
  border: 7.5px solid #000;
  border-radius: 36em 36em 28em 28em / 34em 34em 38em 38em;
}
/* 鼻子： */
.nose {
  width: 35px;
  height: 26px;
  background-color: #000;
  position: relative;
  top: -290px;
  left: 187.5px;
  border-radius: 8em 8em 16em 16em;
  z-index: 1;
}
/* 第一个嘴巴样式： */
.mouth {
  height: 45px;
  width: 55px;
  background-color: rgba(0, 0, 0, 0);
  border: 4px solid #000;
  position: relative;
  top: -326px;
  left: 173.5px;
  border-radius: 50%;
  border-color: transparent transparent #000 transparent;
}
/* 左眼： */
.left-eye {
  height: 116px;
  width: 110px;
  background-color: #000;
  border-radius: 150% 75% 150% 75%;
  position: relative;
  top: -440px;
  left: 70px;
}
/* 右眼： */
.right-eye {
  height: 116px;
  width: 110px;
  background-color: #000;
  border-radius: 75% 150% 75% 150%;
  position: relative;
  top: -555px;
  left: 230px;
}
/* 左眼白： */
.left-eyeWithe {
  position: relative;
  top: -640px;
  left: 110px;
}
/* 左眼的那个圈： */
.left-circle {
  height: 46px;
  width: 46px;
  border: 6px solid #ffffff;
  border-radius: 50%;
}
/* 左眼的小白点： */
.left-point {
  height: 12px;
  width: 12px;
  background-color: #ffffff;
  position: relative;
  top: 10px;
  left: 26px;
  border-radius: 50%;
}
/* 右眼白： */
.right-eyeWithe {
  position: relative;
  top: -700px;
  left: 242px;
}
.right-circle {
  height: 46px;
  width: 46px;
  border: 6px solid #ffffff;
  border-radius: 50%;
}
.right-point {
  height: 12px;
  width: 12px;
  background-color: #ffffff;
  position: relative;
  top: 11px;
  left: 26px;
  border-radius: 50%;
}
/* 脸（五个颜色的环） */
.face {
  height: 266px;
  width: 336px;
  position: relative;
  top: -843px;
  left: 33px;
  border: 4px solid #006bb0;
  border-radius: 19em 19em 16em 16em / 18em 18em 14em 14em;
  /* 画出五层颜色： */
  box-shadow: 0 0 0 4px #dc2f1f, 0 0 0 8px #1d1815, 0 0 0 12px #efa90d,
    0 0 0 16px #059341;
}
/* 左手： */
.left-hand {
  /* 标注版权： */
  color: #000;
  font-size: x-small;
  font-weight: 700;
  line-height: 85px;
  height: 85px;
  width: 85px;
  background-color: #000;
  border-radius: 50% 10% 50% 50% / 50% 20% 50% 50%;
  position: relative;
  top: -880px;
  left: -76px;
}
/* 左胳膊： */
.left-arm {
  width: 82px;
  box-sizing: border-box;
  position: relative;
  top: -1016px;
  left: -75px;
  border-bottom: 85px solid #000;
  border-left: 80px solid transparent;
  border-bottom-right-radius: 2px;
}
/* 左耳： */
.left-ear {
  height: 100px;
  width: 80px;
  background-color: #000;
  position: relative;
  top: -1340px;
  left: 39px;
  border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
  z-index: -1;
}
/* 右耳： */
.right-ear {
  height: 100px;
  width: 80px;
  background-color: #000;
  position: relative;
  top: -1440px;
  left: 288px;
  border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
  z-index: -1;
}
/* 左脚： */
.left-foot {
  height: 100px;
  width: 100px;
  background-color: #000;
  position: relative;
  top: -1099px;
  left: 76px;
  border-radius: 26% 80% 20% 26% / 100% 30% 20% 26%;
}
/* 右脚： */
.right-foot {
  height: 100px;
  width: 100px;
  background-color: #000;
  position: relative;
  top: -1199px;
  left: 236px;
  border-radius: 80% 26% 20% 26% / 30% 100% 20% 26%;
}
/* 右胳膊和手： */
.right-armandhand {
  height: 145px;
  width: 75px;
  background-color: #000;
  position: relative;
  top: -1588px;
  left: 405px;
  border-radius: 50px 50px 76px 0 / 50px 50px 100px 0;
  transform: rotate(29deg);
  z-index: -1;
}
/* 用伪类画手心: */
.right-hand-heart {
  height: 100px;
  width: 100px;
  position: relative;
}
.right-hand-heart::after,
.right-hand-heart::before {
  height: 26px;
  width: 15px;
  position: absolute;
  top: -1700px;
  left: 446px;
  content: '';
  background-color: #b4272d;
  border-radius: 45% 45% 0 0 / 45% 45% 0 0;
  transform: rotate(-45deg);
}
.right-hand-heart::after {
  left: 455px;
  transform: rotate(45deg);
}
/* 第二个嘴的样式： */
.mouth-beauty {
  height: 80px;
  width: 104px;
  background-color: #000;
  position: relative;
  top: -1786px;
  left: 155px;
  border-radius: 50%;
  transform: rotate(-16deg);
}
.mouth-beauty::after {
  display: inline-block;
  height: 30px;
  width: 66px;
  font-size: 16px;
  content: '';
  background-color: #fff;
  position: relative;
  top: -6px;
  left: 24px;
  border-radius: 70%;
}
.tongue {
  height: 36px;
  width: 66px;
  background-color: #b4272d;
  position: relative;
  top: -1830px;
  left: 170px;
  border-radius: 50%;
}

/* 奥运五环： */
.five-Olympic-Rings {
  background-color: #fff;
  position: relative;
  top: -1700px;
  left: 152px;
}
.first {
  height: 28px;
  width: 28px;
  position: absolute;
  top: 10px;
  left: 10px;
  border-radius: 50%;
  border: 4px solid #006bb0;
  box-sizing: border-box;
}
.second {
  height: 28px;
  width: 28px;
  position: absolute;
  top: 10px;
  left: 38px;
  border-radius: 50%;
  border: 4px solid #efa90d;
  box-sizing: border-box;
}
.thrid {
  height: 28px;
  width: 28px;
  position: absolute;
  top: 10px;
  left: 66px;
  border-radius: 50%;
  border: 4px solid #1d1815;
  box-sizing: border-box;
}
.forth {
  height: 28px;
  width: 28px;
  position: absolute;
  top: 20px;
  left: 24px;
  border-radius: 50%;
  border: 4px solid #059341;
  box-sizing: border-box;
}
.fifth {
  height: 28px;
  width: 28px;
  position: absolute;
  top: 20px;
  left: 52px;
  border-radius: 50%;
  border: 4px solid #dc2f1f;
  box-sizing: border-box;
}
/* 北京2022字体： */
.beijing2022 {
  height: 100px;
  width: 100px;
  color: #000;
  font-family: FZShuTi;
  font-size: 22px;
  font-weight: 700;
  position: relative;
  top: -1720px;
  left: 140px;
}
/* 冬奥会logo: */
.logo {
  height: 40px;
  width: 50px;
  background-image: url(./2022北京冬奥会标志.png);
  background-size: 39px 40px;
  background-repeat: no-repeat;
  position: relative;
  top: -1856px;
  left: 184px;
}

成果图：

（公众号后台回复内回复 冰墩墩 ，可获取源代码）