来了来了,纯CSS版的冰墩墩来了hel

看到抖音上有一个Python版本的冰墩墩,可是没看到CSS版的,感觉挺奇怪的。以往会有不少人会用CSS来画画啊,比如机器猫什么的,这样看来,现在大家对于CSS的热情果然是更低了。??

哎,无所谓,这不是重点。重点是来到湖北之后,Mac笔记本的电源估计是因为太冷的关系,一直都是1%,电池图标是带有一个x的。于是想着各种方式来提高一下温度,最后无聊到开始用CSS来画冰墩墩……

看看那个电源……都想着节后回杭州是不是换电池了。结果今天突然发现可以充电了,电池是%了。??

既然已经无聊了一半,那就继续无聊下去把代码稍微调整一下,把冰墩墩稍微完善一下。

具体的技术含量似乎并没有多少,都是一些CSS属性图形上的变化,尤其是圆角方面的处理。代码如下,没具体细化调整,比较随性。

divid="bingdundun"divclass="body"/divdivclass="earLeft"/divdivclass="earRight"/divdivclass="face"/divdivclass="eyeLeft"/divdivclass="eyeLefteyeRight"/divdivclass="nose"/divdivclass="mouth"/divdivclass="handLeft"/divdivclass="handRight"/divdivclass="footerLeft"/divdivclass="footerLeftfooterRight"/div/div

#bingdundun{position:relative;width:px;height:px;}#bingdundun.body{position:absolute;top:76px;left:93px;width:px;height:px;border-radius:91pxpx74px84px/pxpxpxpx;background-color:#fff;border:5pxsolid#;box-sizing:border-box;z-index:1;}#bingdundun.earLeft{position:absolute;top:77px;left:px;width:43px;height:66px;transform:rotate(deg);background-color:#;border-radius:91px52px74px84px/px68pxpxpx;}#bingdundun.earRight{position:absolute;top:76px;left:px;width:39px;height:50px;transform:rotate(deg);background-color:#;border-radius:7px52px74px84px/33px68pxpxpx;}#bingdundun.face{position:absolute;top:px;left:px;width:px;height:px;border-radius:98pxpx82px84px/px93px66px70px;background-color:#fff;box-shadow:rgb(,,)px,rgb(,35,96)px,rgb(81,,)px,rgb(,,70)px,rgb(,,)px;z-index:2;}#bingdundun.eyeLeft{position:absolute;top:px;left:px;width:47px;height:65px;transform:rotate(45deg);background-color:rgb(57,56,63);border-radius:69px62px69px69px/97px93px97px97px;z-index:4;}#bingdundun.eyeLeft::before{content:"";position:absolute;top:13px;left:15px;width:23px;height:23px;border-radius:50%;border:3pxsolid#fff;background-color:rgb(60,60,57);z-index:5;box-sizing:border-box;}#bingdundun.eyeLeft::after{content:"";position:absolute;top:18px;left:25px;width:6px;height:6px;z-index:6;border-radius:50%;background-color:#fff;z-index:6;}#bingdundun.eyeRight{left:px;transform:rotate(-45deg);}#bingdundun.eyeRight::before{top:10px;left:9px;}#bingdundun.eyeRight::after{top:15px;left:16px;}#bingdundun.nose{position:absolute;top:px;left:px;width:26px;height:14px;transform:rotate(deg);z-index:6;overflow:hidden;}#bingdundun.nose::after{width:20px;height:20px;background-color:#;border-radius:6px9px9px16px/6px8px6px6px;content:"";position:absolute;top:-1px;left:0;transform-origin:topleft;transform:rotate(45deg)translate3d(50%,-50%,0);box-sizing:border-box;}#bingdundun.mouth{position:absolute;top:px;left:px;width:50px;height:35px;background-color:#;border-radius:50%48%60%/48%45%;transform:rotate(1deg);z-index:5;}#bingdundun.mouth::before{content:"";position:absolute;top:-12px;left:4px;width:35px;height:20px;border-radius:50%;background-color:#fff;z-index:1;}#bingdundun.mouth::after{content:"";position:absolute;bottom:3px;left:7px;width:36px;height:13px;background-color:rgb(,51,51);border-radius:50%48%80%80%/68%45%80%60%;}#bingdundun.handLeft{position:absolute;top:px;left:83px;width:40px;height:70px;background-color:#;transform:rotate(30deg);}#bingdundun.handLeft::after{content:"";position:absolute;bottom:-22px;left:0;width:41px;height:40px;background-color:#;border-radius:50%;}#bingdundun.handRight{position:absolute;top:px;left:px;width:40px;height:70px;background-color:#;border-radius:44pxpx/px30pxpx;transform:rotate(40deg);transform-origin:bottomcenter;}#bingdundun.handRight::after{content:"?";position:absolute;top:-14px;left:5px;width:35px;height:35px;font-size:20px;text-align:center;letter-spacing:-2px;color:rgb(,51,51);background-color:#;border-radius:40px40px55px/px40pxpx0;transform:rotate(-55deg);transform-origin:center;}#bingdundun.footerLeft{position:absolute;top:px;left:px;width:40px;height:40px;background-color:#;border-radius:px/px00;z-index:7;}#bingdundun.footerLeft::before{content:"";position:absolute;bottom:-14px;left:0;width:42px;height:20px;background-color:#;border-radius:px4px;}#bingdundun.footerRight{left:px;transform:rotateY(deg);}

-TheEnd-

往期推荐

CSS状态管理,玩出花了!

大开眼界:CSS指纹

之前写的JSX的条件语句竟然存在那么多Bug?

从的收藏夹里掏出22个实用的前端工具给大家~

ElementPlus正式版发布啦!

去年这些瓜,轰动了整个IT圈!

最后,欢迎加我的


转载请注明:http://www.aierlanlan.com/rzdk/590.html

  • 上一篇文章:
  •   
  • 下一篇文章: