冰墩墩太火了，一墩难求？Bloger用css方式呈现一人一墩
温馨提示：这篇文章已超过792天没有更新，请注意相关的内容是否还可用！
近日来，围绕冬奥的热点层出不穷。观众们眼前不断闪过一个接一个既陌生又新鲜好玩的项目，话题更迭的速度比钢架雪车还快。自然也会衍生出诸多分歧：围绕谷爱凌的国籍、苏翊鸣的分数、短道速滑赛场上几乎每一次的摔倒和判罚……这是每一届体育大赛中，都少不了的争论甚至争吵，只有冰墩墩成为了例外。
这个北京2022年冬奥会的官方吉祥物，真正团结起了全世界观众，并得到了赛前意想不到的全民追捧。无论是运动员、代表团成员、媒体记者还是普通观众，都在问同一个问题：怎样才能买到冰墩墩？既然买不到那就自己做一个吧，代码非原创，出自青姐之后，链接见底布：
青姐花了3、4个小时，用css画了一个冰墩墩，其实html结构很简单，主要是在css上下功夫，用得最多的是伪类，圆角，定位。如果有兴趣的同学，可以尝试着自己画一个，如果再用到css3动画，还有css3颜色渐变，让冰墩墩动起来，效果会更好哦。
演示：
冰墩墩：https://www.wenytao.com/m/yanshi/bdd.html
雪容融：https://www.wenytao.com/m/yanshi/xrr.html
冰墩墩html代码：
<div class="bdd"> <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> </div>
冰墩墩css代码：
* { margin: 0; padding: 0 }
body { font: 15px "Microsoft YaHei", Arial, Helvetica, sans-serif; background: #d4ebf1; color: #000; background-attachment: fixed; }
.bdd { position: absolute; left: 50%; top: 50%; width: 520px; height: 500px; margin-top: -250px; margin-left: -260px; }
.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-radiu冰墩墩代码已经完成了，还可以给冰墩墩的爱心小手加一个打招呼（左右）摆动的动作：
.arm2 { animation:hi 2s infinite; }
@keyframes hi
{
0%{transform: rotate(37deg);}
50% {transform: rotate(44deg);}
100% {transform: rotate(37deg);}
}也可以直接复制演示站的代码，直接复制粘贴就行啦，冰墩墩安排完了，再安排一个冰墩墩的小伙伴雪容融，雪容融是一个红色的小灯笼，用css画，难度比冰墩墩多了很多，冰墩墩不是圆形就是椭圆形，雪容融除了这些，还有不规则的波浪，脸蛋，头顶的积雪，都是不规则的，灯笼青姐是用多个椭圆来实现的。整体来说，雪容融比冰墩墩画的时间多些。
雪容融html代码：
<div class="xrr"> <div class="cap"> <div class="cap1"></div> <div class="cap2"></div> <div class="cap3"></div> <div class="cap4"></div> <div class="cap5"></div> <div class="cap6"></div> <div class="cap7"></div> <div class="cap8"></div> </div> <div class="snow"> <div class="snow1"></div> <div class="snow2"></div> <div class="snow3"></div> <div class="snow4"></div> <div class="snow5"></div> <div class="snow6"></div> <div class="snow7"></div> <div class="snow8"></div> <div class="snow9"></div> <div class="snow10"></div> </div> <div class="x_head"> <div class="x_head_line1"></div> <div class="x_head_line2"></div> <div class="x_head_line3"></div> <div class="x_head_line4"></div> <div class="x_head_line5"></div> </div> <div class="x_face"> <div class="x_face1"></div> <div class="x_face2"></div> <div class="x_face3"></div> <div class="x_face4"></div> <div class="x_face5"></div> <div class="x_face6"></div> <div class="x_face7"></div> <div class="x_face8"></div> <div class="x_face9"></div> </div> <div class="x_eye1"></div> <div class="x_eye2"></div> <div class="rouge1"></div> <div class="rouge2"></div> <div class="x_body"> <div class="abdomen"></div> </div> <div class="scarf"></div> <div class="scarf2"> <div class="line1"></div> <div class="line2"></div> <div class="line3"></div> <div class="line4"></div> </div> <div class="x_arm1"></div> <div class="x_arm2"></div> <div class="x_leg1"></div> <div class="x_leg2"></div> </div> <!--雪容融 end-->
雪容融css代码：
<style>
/*xrr*/
* { margin: 0; padding: 0 }
body { font: 15px "Microsoft YaHei", Arial, Helvetica, sans-serif; background: #d4ebf1; }
.xrr {position: absolute; left: 50%; top: 50%; width: 600px; height: 500px; margin-top: -250px; margin-left: -300px; }
.x_head { position: absolute; width: 366px; height: 297px; left: 97px; top: 63px; background: #d62b01; border: #b82b00 8px solid; border-radius: 166px; }
.x_head_line1, .x_head_line2, .x_head_line3 { position: absolute; background: #d62b01; border: #b82b00 4px solid; }
.x_head_line1 { width: 323px; height: 298px; border-radius: 50%; left: 15px; top: -7px; }
.x_head_line2 { width: 177px; height: 301px; border-radius: 59%; left: 90px; top: -7px; }
.x_head_line3 { width: 52px; height: 301px; border-radius: 80%; left: 163px; top: -3px; border-right: 0; border-top: 0; border-bottom: 0; }
.x_head_line4 { width: 311px; height: 30px; left: 21px; top: 26px; position: absolute; border: 6px solid #b82b00; border-radius: 50% 50% 0 0/100% 100% 0 0; border-bottom: none; }
.x_head_line5 { width: 284px; height: 74px; left: 41px; top: -3px; position: absolute; border: #d62b01 30px solid; border-radius: 50%; border-right: transparent; border-left: transparent; border-bottom: transparent; }
.cap1 { border: #f9ad47 6px solid; width: 32px; height: 12px; position: absolute; top: -8px; left: 268px; border-radius: 50% 50% 0 0/100% 100% 0 0; border-bottom: none; background: #fff; z-index: 6; }
.cap2 { border: #f9ad47 6px solid; width: 14px; height: 10px; position: absolute; top: 9px; left: 249px; border-radius: 50% 50% 0 0/100% 100% 0 0; border-bottom: none; transform: rotate(-89deg); background: #fff; z-index: 5; }
.cap3 { border: #f9ad47 6px solid; width: 14px; height: 10px; position: absolute; top: 9px; left: 303px; border-radius: 50% 50% 0 0/100% 100% 0 0; border-bottom: none; transform: rotate(89deg); background: #fff; z-index: 5; }
.cap4 { position: absolute; top: 20px; left: 264px; width: 5px; height: 5px; border: 6px solid同理想要给雪容融的爱心小手加一个打招呼（左右）摆动的动作：
.x_arm1 {animation:hi 2s infinite;}
@keyframes hi
{
0%{transform: rotate(-37deg);}
50% {transform: rotate(-44deg);}
100% {transform: rotate(-37deg);}
}至此代码已经完成，其中打招呼的代码可以根据需要酌情添加，摆动时间及动作可以重新修改，具体自行研究吧，最后再次感谢青姐的无私奉献，致敬！！！
PS：代码仅供学习交流，严禁用于商业用途。
