冰墩墩太火了，一墩难求？Bloger用css方式呈现一人一墩
近日来，围绕冬奥的热点层出不穷。观众们眼前不断闪过一个接一个既陌生又新鲜好玩的项目，话题更迭的速度比钢架雪车还快。自然也会衍生出诸多分歧：围绕谷爱凌的国籍、苏翊鸣的分数、短道速滑赛场上几乎每一次的摔倒和判罚……这是每一届体育大赛中，都少不了的争论甚至争吵，只有冰墩墩成为了例外。
冰墩墩太火了，一墩难求？Bloger用css方式呈现一人一墩 第1张
这个北京2022年冬奥会的官方吉祥物，真正团结起了全世界观众，并得到了赛前意想不到的全民追捧。无论是运动员、代表团成员、媒体记者还是普通观众，都在问同一个问题：怎样才能买到冰墩墩？既然买不到那就自己做一个吧，代码非原创，出自青姐之后，链接见底布：
青姐花了3、4个小时，用css画了一个冰墩墩，其实html结构很简单，主要是在css上下功夫，用得最多的是伪类，圆角，定位。如果有兴趣的同学，可以尝试着自己画一个，如果再用到css3动画，还有css3颜色渐变，让冰墩墩动起来，效果会更好哦。
演示：
冰墩墩：https://www.talklee.com/bdd.html
雪容融：https://www.talklee.com/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-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;?position:?absolute;left:?284px;top:?187px;width:?28px;height:?18px;border-radius:?42px?42px?60px?61px/?30px?30px?50px?46px;}
.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:?#333;?border-radius:?30px;?}
.leg1:after?{?bottom:?0;?right:?-3px;?}
.leg2:after?{?bottom:?0;?left:?-3px;?}冰墩墩代码已经完成了，还可以给冰墩墩的爱心小手加一个打招呼（左右）摆动的动作：
.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?#f9ad47;?border-color:?#f9ad47;?border-left-color:?transparent;?border-radius:?50%;?z-index:?4;?transform:?rotate(45deg);?background:?#fff;?}????
.cap5?{?position:?absolute;?top:?20px;?left:?297px;?width:?5px;?height:?5px;?border:?6px?solid?#f9ad47;?border-color:?#f9ad47;?border-left-color:?transparent;?border-radius:?50%;?z-index:?4;?transform:?rotate(137deg);?background:?#fff;?}????
.cap6?{?border:?#f9ad47?6px?solid;?width:?4px;?height:?1px;?position:?absolute;?top:?26px;?left:?276px;?border-radius:?0?0?50%?50%/0?0?100%?100%;?border-top:?none;?transform:?rotate(346deg);?z-index:?5;?}????
.cap7?{?border:?#f9ad47?6px?solid;?width:?4px;?height:?1px;?position:?absolute;?top:?26px;?left:?286px;?border-radius:?0?0?50%?50%/0?0?100%?100%;?border-top:?none;?transform:?rotate(14deg);?z-index:?5;?}????
.cap8?{?content:?"";?position:?absolute;?background:?#fff;?width:?53px;?height:?26px;?border-radius:?30px;?left:?265px;?top:?5px;?}????
.x_body?{?background:?#d62b01;?border:?#ba2b00?8px?solid;?width:?156px;?height:?116px;?border-radius:?10%?10%?40%?52%?/?10%?21%?44%?47%;?position:?absolute;?top:?364px;?left:?207px;?z-index:?2;?}????
.x_body:before?{content:?"";width:?90px;height:?84px;background:?url(../skin/html/bdd/logo.png)?no-repeat?center?#fff;background-size:?44px;position:?absolute;border-radius:?100%;left:?37px;top:?23px;}????
.x_arm1,?.x_arm2?{?background:?#d62b01;?border:?#ba2b00?6px?solid;?width:?45px;?height:?83px;?position:?absolute;?z-index:?1;?}????
.x_arm1?{?top:?346px;?left:?160px;?border-radius:?50%?50%?40%?65%?/?30%?30%?52%?72%;?transform:?rotate(-45deg);?}????
.x_arm2?{?top:?364px;?left:?357px;?border-radius:?46%?39%?56%?65%?/?30%?57%?47%?44%;?transform:?rotate(?321deg?);?}????
.x_leg1,?.x_leg2?{?background:?#d62b01;?border:?#ba2b00?6px?solid;?width:?46px;?height:?59px;?position:?absolute;?z-index:?1;?border-radius:?0%?0%?50%?50%?/?0%?32%?40%?50%;?}????
.x_leg1?{?top:?465px;?left:?233px;?}????
.x_leg2?{?top:?465px;?left:?303px;?}????
.x_leg1:before,?.x_leg2:before?{?content:?"";?position:?absolute;?left:?11px;?bottom:?3px;?width:?57%;?height:?5px;?border-radius:?0%?0%?50%?50%?/?0%?32%?40%?50%;?border:?#ffc346?6px?solid;?border-top:?none;?border-left:?0;?border-right:?0;?}????
.scarf?{?position:?absolute;?left:?212px;?top:?360px;?background:?#f8a644;?width:?163px;?height:?34px;?border-radius:?15px?19px?51px?51px/17px?16px?24px?17px;?z-index:?2?}????
.scarf2?{?position:?absolute;?left:?223px;?top:?374px;?background:?#f8a644;?width:?44px;?height:?77px;?border-radius:?0?0?12px?5px;?transform:?rotate(18deg);?z-index:?2;?}????
.line1,?.line2,?.line3,?.line4?{?background:?#f8a644;?position:?absolute;?width:?4px;?height:?16px;?border-radius:?0?0?10px?10px;?border:?#d62b01?4px?solid;?border-top:?0;?}????
.line1?{?left:?5px;?top:?62px;?}????
.line2?{?left:?13px;?top:?61px;?}????
.line3?{?left:?21px;?top:?60px;?}????
.line4?{?left:?28px;?top:?59px;?}????
.rouge1,?.rouge2?{?width:?42px;?height:?37px;?position:?absolute;?background:?#e95535;?border-radius:?40px;?}????
.rouge1?{?left:?162px;?top:?225px;?}????
.rouge2?{?left:?364px;?top:?230px;?}????
.x_eye1,?.x_eye2?{?width:?21px;?height:?28px;?position:?absolute;?background:?#3d3d3d;?border-radius:?89%?100%?90%?90%?/?100%?100%?86%?100%;?}????
.x_eye1?{?left:?221px;?top:?210px;?}????
.x_eye2?{?left:?333px;?top:?210px;?}????
.x_eye1:before,?.x_eye2:before?{?content:?"";?position:?absolute;?left:?5px;?top:?5px;?width:?6px;?height:?8px;?border-radius:?10px;?background:?#fff;?transform:?rotate(21deg);?}????
.x_face?{?width:?282px;?height:?160px;?position:?absolute;?left:?146px;?top:?139px;?border-radius:?80px?80px?20px?40px;?}????
.x_face1,?.x_face2,?.x_face3,?.x_face4,?.x_face5,?.x_face6,?.x_face7,?.x_face8?{?border:?#b92c00?6px?solid;?border-radius:?50%;?border-right:?transparent;?border-left:?transparent;?border-top:?transparent;?background:?#fff;?position:?absolute;?}????
.x_face1?{?width:?78px;?height:?87px;?left:?10px;?top:?50px;?transform:?rotate(58deg);?}????
.x_face2?{?width:?73px;?height:?55px;?left:?120px;?top:?-3px;?transform:?rotate(29deg);?border:?#b92c00?6px?solid;?border-radius:?50%?50%?0?0/100%?100%?0?0;?border-bottom:?none;?}????
.x_face3?{?width:?72px;?height:?78px;?left:?204px;?top:?33px;?transform:?rotate(322deg);?border-radius:?0?100%?100%?0/50%;?border:?#b92c00?6px?solid;?border-left:?none;?}????
.x_face4?{?width:?81px;?height:?85px;?left:?64px;?top:?3px;?transform:?rotate(165deg);?}????
.x_face5?{?width:?73px;?height:?69px;?left:?19px;?top:?33px;?transform:?rotate(137deg);?}????
.x_face6?{?width:?49px;?height:?67px;?left:?218px;?top:?79px;?transform:?rotate(303deg);?}????
.x_face7?{?width:?188px;?height:?74px;?left:?51px;?top:?82px;?}????
.x_face8?{?width:?29px;?height:?13px;?left:?182px;?top:?33px;?transform:?rotate(38deg);?z-index:?2;?background:?none;?border:?6px?solid?#b92c00;?border-radius:?0?0?50%?50%/0?0?100%?100%;?border-top:?none;?}????
.x_face8:after?{?content:?"";?width:?29px;?height:?13px;?right:?-6px;?top:?-12px;?position:?absolute;?border:?6px?solid?#b92c00;?border-left-color:?transparent;?border-right-color:?transparent;?border-bottom-color:?#d62b01;?border-top-color:?transparent;?border-radius:?0?0?50%?50%/0?0?100%?100%;?}????
.x_face9?{?width:?170px;?height:?119px;?background:?#ffffff;?left:?40px;?top:?19px;?border-radius:?100%;?position:?absolute;?}????
.x_face9:before?{?content:?"";?background:?#ffffff;?border-radius:?100%;?right:?-14px;?top:?31px;?width:?35px;?height:?37px;?position:?absolute;?transform:?rotate(30deg);?}????
.snow1?{?width:?105px;?height:?16px;?transform:?rotate(341deg);?left:?147px;?top:?57px;?position:?absolute;?z-index:?3;?border:?6px?solid?#83b9e8;?border-radius:?50%?50%?0?0/100%?100%?0?0;?border-bottom:?none;?background:?#fff;?border-right:?0;?}????
.snow2?{?position:?absolute;?width:?78px;?height:?20px;?left:?243px;?top:?29px;?z-index:?2;?background:?#fff;?border:?6px?solid?#83b9e8;?border-radius:?50%?50%?0?0/100%?100%?0?0;?border-bottom:?none;?}????
.snow2:after?{?content:?"";?width:?80px;?height:?16px;?background:?#ffffff;?position:?absolute;?border-radius:?10px;?top:?13px;?left:?-1px;?}????
.snow3?{?position:?absolute;?width:?44px;?height:?13px;?left:?228px;?top:?63px;?z-index:?2;?background:?#fff;?border:?6px?solid?#83b9e8;?border-radius:?0?0?50%?50%/0?0?100%?100%;?border-top:?none;?border-left:?0;?border-right:?0;?}????
.snow4?{?position:?absolute;?width:?42px;?height:?11px;?left:?268px;?top:?58px;?z-index:?3;?background:?none;?border:?6px?solid?#83b9e8;?border-radius:?50%?50%?0?0/100%?100%?0?0;?border-bottom:?none;?transform:?rotate(4deg);?border-left:?0;?border-right:?0;?}????
.snow5?{?position:?absolute;?width:?41px;?height:?15px;?left:?300px;?top:?56px;?z-index:?2;?background:?#fff;?border:?6px?solid?#83b9e8;?border-radius:?0?0?50%?50%/0?0?100%?100%;?border-top:?none;?transform:?rotate(359deg);?border-right:?0;?border-left:?0;?}????
.snow6?{?background:?none;?border:?6px?solid?#83b9e8;?position:?absolute;?left:?150px;?top:?72px;?width:?62px;?height:?14px;?border-radius:?24px;?transform:?rotate(340deg);?z-index:?2;?border-top:?0;?border-right:?0;?border-left:?0;?}????
.snow7?{?border:?6px?solid?#83b9e8;?position:?absolute;?left:?362px;?top:?69px;?width:?58px;?height:?13px;?border-radius:?24px;?transform:?rotate(23deg);?z-index:?3;?border-top:?0;?border-left:?0;?border-right:?0;?}????
.snow8?{?position:?absolute;?width:?32px;?height:?6px;?left:?203px;?top:?69px;?z-index:?4;?background:?none;?border:?6px?solid?#83b9e8;?border-radius:?50%?50%?0?0/100%?100%?0?0;?border-bottom:?none;?border-right:?0;?transform:?rotate(357deg);?}????
.snow9?{?position:?absolute;?width:?40px;?height:?4px;?left:?332px;?top:?65px;?z-index:?4;?background:?none;?border:?6px?solid?#83b9e8;?border-radius:?50%?50%?0?0/100%?100%?0?0;?border-bottom:?none;?transform:?rotate(16deg);?border-left:?0;?border-right:?0;?}????
.snow10?{?width:?97px;?height:?16px;?transform:?rotate(21deg);?left:?320px;?top:?54px;?position:?absolute;?z-index:?3;?border:?6px?solid?#83b9e8;?border-radius:?50%?50%?0?0/100%?100%?0?0;?border-bottom:?none;?background:?#fff;?border-left:?0;?}????
</style>同理想要给雪容融的爱心小手加一个打招呼（左右）摆动的动作：
.x_arm1?{animation:hi?2s?infinite;}
@keyframes?hi????
{????
0%{transform:?rotate(-37deg);}????
50%?{transform:?rotate(-44deg);}????
100%?{transform:?rotate(-37deg);}????
}至此代码已经完成，其中打招呼的代码可以根据需要酌情添加，摆动时间及动作可以重新修改，具体自行研究吧，最后再次感谢青姐的无私奉献，致敬！！！
PS：代码仅供学习交流，严禁用于商业用途。
本文参与?腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录