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

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

这个北京2022年冬奥会的官方吉祥物，真正团结起了全世界观众，并得到了赛前意想不到的全民追捧。无论是运动员、代表团成员、媒体记者还是普通观众，都在问同一个问题：怎样才能买到冰墩墩？既然买不到那就自己做一个吧，代码非原创，出自青姐之后，链接见底布：

青姐花了3、4个小时，用css画了一个冰墩墩，其实html结构很简单，主要是在css上下功夫，用得最多的是伪类，圆角，定位。如果有兴趣的同学，可以尝试着自己画一个，如果再用到css3动画，还有css3颜色渐变，让冰墩墩动起来，效果会更好哦。

冰墩墩： https://www.itlaoli.com/bdd.html

雪容融： https://www.itlaoli.com/xrr.html

冰墩墩代码已经完成了，还可以给冰墩墩的爱心小手加一个打招呼（左右）摆动的动作：

也可以直接复制演示站的代码，直接复制粘贴就行啦，冰墩墩安排完了，再安排一个冰墩墩的小伙伴雪容融，雪容融是一个红色的小灯笼，用css画，难度比冰墩墩多了很多，冰墩墩不是圆形就是椭圆形，雪容融除了这些，还有不规则的波浪，脸蛋，头顶的积雪，都是不规则的，灯笼青姐是用多个椭圆来实现的。整体来说，雪容融比冰墩墩画的时间多些。

同理想要给雪容融的爱心小手加一个打招呼（左右）摆动的动作：

至此代码已经完成，其中打招呼的代码可以根据需要酌情添加，摆动时间及动作可以重新修改，具体自行研究吧，最后再次感谢青姐的无私奉献，致敬！！！

PS：代码仅供学习交流，严禁用于商业用途。

个人博客主题模板给鼠标添加跟随特效教程

微信小程序调用相机或者图库实现扫描二维码或者条码的文档教程

当前文章地址：http://www.shangwukj.cn/post/5940/28605.php