冰墩墩太火了,一墩难求?Bloger用css方式呈现一人一墩

02-15 552阅读

温馨提示:这篇文章已超过127天没有更新,请注意相关的内容是否还可用!

近日来,围绕冬奥的热点层出不穷。观众们眼前不断闪过一个接一个既陌生又新鲜好玩的项目,话题更迭的速度比钢架雪车还快。自然也会衍生出诸多分歧:围绕谷爱凌的国籍、苏翊鸣的分数、短道速滑赛场上几乎每一次的摔倒和判罚……这是每一届体育大赛中,都少不了的争论甚至争吵,只有冰墩墩成为了例外。

冰墩墩太火了,一墩难求?Bloger用css方式呈现一人一墩 第1张

这个北京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:代码仅供学习交流,严禁用于商业用途。

李洋博客 https://www.talklee.com/blog/663.html