一墩难求,那就用css来画一个冰墩墩吧

两天 2022年02月13日15:12:33资源分享来源:杨青青博客1 4391字数 4174阅读13分54秒阅读模式

以下内容来自杨青青博客

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

一墩难求,那就用css来画一个冰墩墩吧

Html:

 

  1. <div class="bdd">  
  2. <div class="m_body"></div>  
  3. <div class="ear1"></div>  
  4. <div class="ear2"></div>  
  5. <div class="eye1"></div>  
  6. <div class="eye2"></div>  
  7. <div class="face c_blue"></div>  
  8. <div class="face c_red"></div>  
  9. <div class="face c_purple"></div>  
  10. <div class="face c_yellow"></div>  
  11. <div class="face c_green"></div>  
  12. <div class="nose"></div>  
  13. <div class="mouse"></div>  
  14. <div class="arm1"></div>  
  15. <div class="arm2"></div>  
  16. <div class="leg1"></div>  
  17. <div class="leg2"></div>  
  18. </div>  

CSS:

  1. * { margin: 0; padding: 0 }  
  2. body { font15px "Microsoft YaHei"ArialHelveticasans-serifbackground#d4ebf1color#000background-attachmentfixed; }  
  3. .bdd { positionabsoluteleft: 50%; top: 50%; width520pxheight500pxmargin-top: -250pxmargin-left: -260px; }  
  4. .m_body {width362px;height410px;border#393939 8px solid;margin50px auto;border-radius: 88% 88% 62% 68% / 82% 82% 95% 84%;positionabsolute;left109px;top: -30px;background#fff;}  
  5. .ear1, .ear2 {background#393939;width81px;height115px;border-radius: 50%;positionabsolute;z-index: -1;}  
  6. .ear1 {left150px;top26px;transform: rotate( -10deg );}  
  7. .ear2 {left362px;top28px;transform: rotate(10deg);}  
  8. .eye1, .eye2 {background#393939;width83px;height115px;border-radius: 50%;positionabsolute;}  
  9. .eye1 { left185pxtop122px; transform: rotate(45deg); }  
  10. .eye2 { left329pxtop122px; transform: rotate(-45deg); }  
  11. .eye1:before, .eye2:before { content""width40pxheight40pxborder#fff 5px solidborder-radius: 100%; positionabsolute; }  
  12. .eye1:before { rightright10pxtop22px; }  
  13. .eye2:before { left10pxtop22px; }  
  14. .eye1:after, .eye2:after { content""width10pxheight10pxbackground#9b9b9bborder-radius: 100%; positionabsolute; }  
  15. .eye1:after { rightright27pxtop31px; }  
  16. .eye2:after { left41pxtop44px; }  
  17. .face {positionabsolute;border-radius: 48% 48% 44% 49%/ 53% 54% 45% 47%;}  
  18. .c_blue { border#6bcdf3 5px solidwidth280pxheight224pxleft150pxtop78px; }  
  19. .c_red { border#af2350 5px solidwidth287pxheight233pxleft146pxtop73px; }  
  20. .c_purple { border#5d75b3 5px solidwidth295pxheight240pxleft142pxtop70px; }  
  21. .c_yellow { border#ffc346 5px solidwidth305pxheight248pxleft137pxtop65px; }  
  22. .c_green { border#7fcb58 5px solidwidth313pxheight256pxleft133pxtop61px; }  
  23. .arm1, .arm2 { background#333positionabsolutez-index: -1; }  
  24. .arm1 {width75px;height118px;left64px;top244px;transform: rotate(45deg);border-radius: 24% 69% 68% 76%/ 53% 95% 40% 52%;}  
  25. .arm2 {width75px;height148px;left463px;top162px;transform: rotate(37deg);border-radius: 56% 62% 98% 6%/ 40% 46% 80% 58%;}  
  26. .arm2:before { content""width16pxheight24pxbackground#bc242cpositionabsoluteborder-top-left-radius: 50%; border-top-rightright-radius: 50%; transform: rotate(45deg); left32pxtop20px; }  
  27. .arm2:after { content""width16pxheight24pxbackground#bc242cpositionabsoluteborder-top-left-radius: 50%; border-top-rightright-radius: 50%; transform: rotate(-45deg); left26pxtop20px; }  
  28. .arm_c { content""width16pxheight24pxpositionabsoluteleft426pxtop20px; }  
  29. .nose{background-color#333333positionabsolute;left284px;top187px;width28px;height18px;border-radius: 42px 42px 60px 61px30px 30px 50px 46px;}  
  30. .mouse {positionabsolute;left265px;top205px;width68px;height25px;border-radius: 48%;border#393939 7px solid;border-topnone;border-left: 0;border-right: 0;}  
  31. .leg1, .leg2 {background#333;positionabsolute;width83px;height80px;border-radius: 0 0 30px 30px;z-index: -1;}  
  32. .leg1 { left187pxtop423px; }  
  33. .leg2 { left328pxtop423px; }  
  34. .leg1:after, .leg2:after { content""width43pxheight30pxpositionabsolutebackground#333border-radius: 30px; }  
  35. .leg1:after { bottombottom: 0; rightright: -3px; }  
  36. .leg2:after { bottombottom: 0; left: -3px; }  

预览页面:https://2days.org/bdd.html

相关文章
继续阅读
  • 我的QQ
  • 这是我的qq扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin
两天
  • 版权声明 本文源自 杨青青博客 整理 发表于 2022年02月13日15:12:33
  • 转载请务必保留本文链接:https://2days.org/3267.html
评论  1  访客  1
    • 家和
      家和 0

      css画这个,学到了,可惜实在不精通

    匿名

    发表评论

    匿名网友 填写信息

    :?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

    确定