经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » HTML/CSS » CSS3 » 查看文章
涨姿势了！纯css3绘制百度的小度熊
来源：jb51　　时间：2018/10/30 9:07:05　　对本文有异议

前几天看到一篇文章是写用css3绘制腾讯企鹅的。趁着今天有空，就用css3来写一个百度的小度熊。话不多说，开始上码。

爆照

先来一张呆萌小度熊的成果照。


 

在绘制小度熊之前，首先要对小度熊布局上进行一个分解，便于我们组织代码结构。 从整体结构上主要分成耳朵，头部和身体。我们统一对将胳膊，肚子和腿都放到了身体的部分里。

  1. <!-- 页面框架 -->
  2. <!Doctype html>
  3. <html>
  4. <head>
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
  6.     <title>纯css度熊</title>
  7.     <link rel="stylesheet" href="./bear.css"/>
  8. </head>
  9. <body>
  10.     <!-- 背景 -->
  11.     <div class="bac">
  12.         <!-- 头部 -->
  13.             <!-- 耳朵 -->
  14.             <div class="earLeft"></div>
  15.             <div class="earRight"></div>
  16.             <!-- 脸 -->
  17.             <div class="head"></div>
  18.         <!-- 身体 -->
  19.         <div class="body">
  20.             <!-- 胳膊 -->
  21.             <div class="armLeft"></div>
  22.             <div class="armRight"></div>
  23.             <!-- 肚子 -->
  24.             <div class="tummy"></div>
  25.             <!-- 腿 -->
  26.             <div class="legLeft"></div>
  27.             <div class="legRight"></div>
  28.         </div>
  29.         <!-- 阴影 -->
  30.         <div class="shaodw"></div>
  31.     </div>
  32. </body>

结构调整好之后，我们先把背景容器的位置和大小设置一下。在开发的时候，可以先给背景设置一个深色背景，便于我们看各部分的位置，最后的时候注释掉就可以了。

  1. /*背景容器*/
  2. .bac {
  3.     width: 345px;
  4.     height: 500px;
  5.     top: 50%;
  6.     position: relative;
  7.     left: 50%;
  8.     transform: translate(-50%,-50%);
  9.     /* background-color: #333333; */
  10.  }

头部

然后我们就可以在容器中，放置各个部分了，我是按从上到下的顺序写的，所以最开始放置的是头部。

 

  1. /*头部*/
  2. .bac .head {
  3.     width: 346px;
  4.     height: 288px;
  5.     /* background-color: #e1b79b; */
  6.     border: 3px solid #a57662;
  7.     border-radius: 50% 50% 50% 50% / 70% 60% 40% 40%;
  8.     position: relative;
  9.     z-index: 88;
  10.   }

知识点来了，怎么样可以画出这种不规则的形状呢？绘制这种带有弧线的形状，可以使用border-radius属性，具体使用方法这里不深入讨论，简单来说通过设置元素的border-radius值，可以轻松给元素设置圆角边框，甚至实现绘制圆、半圆、四分之一的圆等各种圆角图形。因为我没有准确的尺寸图，所以就用百分比来实现了。

&ldquo;/&rdquo;前的四个数值表示圆角的水平半径，后面四个值表示圆角的垂直半径。这个方法我们在后面还会很频繁的使用到。

耳朵

绘制完头部轮廓之后，我们可以把耳朵的轮廓也加上，本来计划是将耳朵写在头部

内部的，但是因为要考虑层级压盖的情况，还是把耳朵要素单独的放在了外面。这里有一个关键属性就是transform: rotate(Xdeg)用来对要素做旋转，我们可以将耳朵旋转成对应的角度。
 

  1. /*左耳朵*/
  2. .earLeft {
  3.     height: 50px;
  4.     width: 70px;
  5.     /* background-color: #e1b79b; */
  6.     border-radius: 200px 200px 100px 100px;
  7.     border: 3px solid #a57662;
  8.     transform: rotate(-49deg);
  9.     position: absolute;
  10.     top: 10px;
  11.     left: 12px;
  12. }
  13.  
  14. /*右耳朵*/
  15. .earRight {
  16.     height: 50px;
  17.     width: 70px;
  18.     /* background-color: #e1b79b; */
  19.     border-radius: 200px 200px 100px 100px;
  20.     border: 3px solid #a57662;
  21.     transform: rotate(40deg);
  22.     position: absolute;
  23.     top: 10px;
  24.     right: 0;
  25. }

眼睛

接下来就开始填充绘制头部里面的内容，头部里面主要是眼睛，鼻子和嘴巴，我们先来画眼睛，为了看的清楚，我们就把头部填充上颜色了。

 

  1. /*左眼白*/
  2. .head .eyeLeft {
  3.     height: 78px;
  4.     width: 67px;
  5.     background-color: #ffffff;
  6.     border-radius: 50% / 50%;
  7.     transform: rotate(20deg);
  8.     position: absolute;
  9.     top: 113px;
  10.     left: 68px;
  11.  }
  12.  
  13.  /*左眼珠*/
  14.  .head .eyeConLeft {
  15.     width: 28px;
  16.     height: 33px;
  17.     background-color: #511313;
  18.     position: absolute;
  19.     border-radius: 50%/50%;
  20.     transform: rotate(-13deg);
  21.     top: 20px;
  22.     right: 15px;
  23.  }
  24.  
  25.  /*右眼白*/
  26.  .head .eyeRight {
  27.     height: 78px;
  28.     width: 67px;
  29.     background-color: #ffffff;
  30.     border-radius: 50% / 50%;
  31.     transform: rotate(-20deg);
  32.     position: absolute;
  33.     top: 113px;
  34.     right: 68px;
  35.  }
  36.  
  37.  /*右眼珠*/
  38.  .head .eyeConRight {
  39.     width: 28px;
  40.     height: 33px;
  41.     background-color: #511313;
  42.     position: absolute;
  43.     border-radius: 50%/50%;
  44.     transform: rotate(13deg);
  45.     top: 20px;
  46.     left: 15px;
  47. }

 

嘴巴

绘制了眼睛之后，我们来绘制嘴巴，嘴巴没有太特殊的地方，我们用正常椭圆就可以。
 

  1. /*嘴巴*/
  2. .head .mouse {
  3.     width: 99px;
  4.     height: 76px;
  5.     background-color: #f7f9e5;
  6.     position: absolute;
  7.     left: 50%;
  8.     transform: translate(-50%,0);
  9.     border-radius: 50% / 50%;
  10.     top: 187px;
  11.  }

鼻子

虽然嘴巴就是一个普通的椭圆，但是鼻子比较特殊，鼻子我们可以看作是一个半椭圆+三角形组成。


 

知识点又来了，怎么样用css画半椭圆和三角形呢？

我们可以利用 border-radius: 50%/100% 100% 0 0; 来实现半椭圆的绘制。


 

我们利用将width和height设置为0，通过border属性来实现三角形的绘制。


 

我为了操作方便，在给鼻子设置来一个容器，使其居中，便于调整。

  1. /*鼻子容器*/
  2. .head .nose {
  3.     width: 18px;
  4.     height: 14px;
  5.     position: absolute;
  6.     left: 50%;
  7.     margin-left: -9px;
  8.     top: 13px;
  9. }
  10.  
  11. /* 鼻子上部分-半椭圆*/
  12. .nose .noseTop {
  13.     width: 18px;
  14.     height: 8px;
  15.     background-color: #511313;
  16.     border-radius: 50%/100% 100% 0 0;
  17.  }
  18.  
  19.  /* 鼻子下部分-三角形*/
  20.  .nose .noseBottom {
  21.     width: 0;
  22.     height: 0;
  23.     border-width: 9px 9px 0;
  24.     border-style: solid;
  25.     border-color: #511313 transparent transparent;
  26.     position: relative;
  27.  }

耳朵内部

终于完成了头部的操作，结果发现耳朵少了点什么，原来耳朵少了内部的要素，我们就分别给耳朵内部加点东西。


 

  1. /* 左耳朵内部*/
  2. .earLeft .earCon {
  3.     width: 40px;
  4.     height: 60px;
  5.     background-color: #eed8c5;
  6.     border-radius: 50%/ 40% 40% 30% 30%;
  7.     margin-left: 17px;
  8.     margin-top: 15px;
  9.     transform: rotate(-3deg);
  10.  }
  11.  
  12.  /*右耳朵内部*/
  13.  .earRight .earCon {
  14.     width: 40px;
  15.     height: 60px;
  16.     background-color: #eed8c5;
  17.     border-radius: 50%/ 40% 40% 30% 30%;
  18.     margin-left: 17px;
  19.     margin-top: 15px;
  20.     transform: rotate(-3deg);
  21.  }

辅助要素

小度熊的头部绘制完了，但是耳朵的地方还不够完美，因为头部的轮廓线把耳朵遮住了，我们想让头部和耳朵连在一起，这就用到了我们的辅助要素。我们可以把辅助要素设置成和头部一样的颜色，将头部与耳朵间的轮廓线盖住，这样就看起来好多了。
 

  1. /*左侧辅助要素*/
  2. .head .arcLeft {
  3.     position: absolute;
  4.     top: 36px;
  5.     left: 23px;
  6.     width: 80px;
  7.     height: 30px;
  8.     background-color: #e1b79b;
  9.     border-radius: 50%/ 50%;
  10.     transform: rotate(-45deg);
  11. }
  12.  
  13. /*右侧辅助要素*/
  14. .head .arcRight {
  15.     position: absolute;
  16.     top: 34px;
  17.     right: 16px;
  18.     width: 80px;
  19.     height: 30px;
  20.     background-color: #e1b79b;
  21.     border-radius: 50%/ 50%;
  22.     transform: rotate(43deg); 
  23. }

身体

终于完成了头部的绘制，接下来就开始身体的绘制，同样需要先分析一下身体里包括那些部分，我们可以看到身体里主要包括胳膊，肚子和腿。


 

我们为了看清楚各部分位置，可以先给身体容器加上背景颜色，最后再去掉。

  1. /*度熊身体*/
  2. .body {
  3.     width: 208px;
  4.     height: 217px;
  5.     margin: -10px auto;
  6.     position: relative;
  7. }

胳膊

我们先来添加小度熊的胳膊，最后位置可以再微调。

 

  1. /*左侧胳膊*/
  2. .body .armLeft {
  3.     width: 53px;
  4.     height: 150px;
  5.     background-color: #e1b79b;
  6.     border: 2px solid #a57662;
  7.     border-radius: 50% 50%/60% 30%;
  8.     transform: rotate(10deg);
  9.     left: 6px;
  10.     position: absolute;
  11. }
  12.  
  13. /*右侧胳膊*/
  14. .body .armRight {
  15.     width: 53px;
  16.     height: 150px;
  17.     background-color: #e1b79b;
  18.     border: 2px solid #a57662;
  19.     border-radius: 50% 50%/60% 30%;
  20.     transform: rotate(-14deg);
  21.     position: absolute;
  22.     right: 6px;
  23. }

肚子

绘制好胳膊我们就可以绘制小度熊，肉嘟嘟的肚子了。


 

知识点来了，这里绘制的肚子有一点想鸡蛋形，其实还是利用border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;这个属性来设置的，通过改变半径大小，实现这种鸡蛋形的图案绘制。

之前说的可能漏了一句，我们的要素大部分是基于position: absolute来定位的，因为这个属性可以设置层级，便于我们图案的压盖。这里的肚子就要设置高一点的层级，压盖住之前绘制的胳膊图案。

 

  1. /*肚子*/
  2. .body .tummy {
  3.     width: 144px;
  4.     height: 200px;
  5.     background-color: #e1b79b;
  6.     position: absolute;
  7.     left: 50%;
  8.     transform: translate(-50%,0);
  9.     border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;
  10.     margin-top: -30px;
  11.     border: 2px solid #a57662;
  12.  }

 

肚子图案

在小度熊的肚子上还有一个小图案，我们直接添加覆盖上去就可以了。

  1. /*肚子图案*/
  2. .body .tummyCon {
  3.     width: 83px;
  4.     height: 90px;
  5.     background-color: #f7f9e5;
  6.     -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
  7.     border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;
  8.     position: absolute;
  9.     top: 60px;
  10.     left: 50%;
  11.     transform: translate(-50%, 0);
  12. }

腿

绘制好肚子之后，我们来绘制腿，腿上面没有什么太多难点，就是注意边框和脚的弧度就行。
 

  1. /*左腿*/
  2. .body .legLeft {
  3.     width: 53px;
  4.     height: 100px;
  5.     background-color: #e1b79b;
  6.     position: absolute;
  7.     bottom: 0px;
  8.     left: 30px;
  9.     border: 2px solid #a57662;
  10.     border-color: transparent transparent #a57662 #a57662;
  11.     border-radius: 50% 50% 50% 50%/0 0 10% 50%;
  12.  }
  13.  
  14.  /*右腿*/
  15.  .body .legRight {
  16.     width: 53px;
  17.     height: 100px;
  18.     background-color: #e1b79b;
  19.     position: absolute;
  20.     bottom: 0px;
  21.     right: 30px;
  22.     border: 2px solid #a57662;
  23.     border-color: transparent #a57662 #a57662 transparent;
  24.     border-radius: 50% 50% 50% 50%/0 0 50% 10%;
  25.  }

辅助要素

到这里我们基本的要素就绘制齐了，身体容器的背景颜色就可以去掉了，然后同样要绘制一些辅助元素，来让我们的小度熊看起来更好看。

我们要给小度熊添加一个脖子，盖住身体的线条。

给肚子添加一个曲线，让肚子和腿更立体。

最后就是要用辅助线条把脚展示出来。

把这几个步骤完成，我们的小度熊整体就全部完成了。

  1. /*脖子遮盖*/
  2. .body .neck {
  3.     width: 120px;
  4.     height: 30px;
  5.     background-color: #e1b79b;
  6.     position: absolute;
  7.     left: 50%;
  8.     transform: translate(-50%,0);
  9.  }
  10.  
  11.  /*肚子辅助线*/
  12.  .body .arc {
  13.     border-bottom: 2px solid #511313;
  14.     position: absolute;
  15.     top: 70px;
  16.     left: 50%;
  17.     transform: translate(-50%, 0);
  18.     width: 100px;
  19.     height: 100px;
  20.     border: solid 2px #a57662;
  21.     border-color: transparent transparent #a57662 transparent;
  22.     border-radius: 50%/ 0 0 30% 30%;
  23.  }
  24.  
  25.  /*左脚辅助线*/
  26.  .body .arcLeft {
  27.     border-bottom: 2px solid #511313;
  28.     position: absolute;
  29.     bottom: -30px;
  30.     left: 43px;
  31.     width: 35px;
  32.     height: 50px;
  33.     border: solid 2px #a57662;
  34.     border-color: #a57662 transparent transparent transparent;
  35.     border-radius: 50%/ 20% 20% 0 0;
  36.  }
  37.  
  38.  /*右脚辅助线*/
  39.  .body .arcRight {
  40.     border-bottom: 2px solid #511313;
  41.     position: absolute;
  42.     bottom: -30px;
  43.     right: 43px;
  44.     width: 35px;
  45.     height: 50px;
  46.     border: solid 2px #a57662;
  47.     border-color: #a57662 transparent transparent transparent;
  48.     border-radius: 50%/ 20% 20% 0 0;
  49.  }

 阴影

最后一步，给小度熊的脚底加一个阴影，我们就大功告成了。

  1. /*阴影*/
  2. .shaodw {
  3.     width: 217px;
  4.     height: 39px;
  5.     background-color: #e9ecee;
  6.     margin: -20px auto;
  7.     border-radius: 50%/50%;
  8. }

总结

绘制小度熊的关键是一个是对于布局的分析，一个是css的border-radius和transform: rotate属性的使用。

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

CSS3热门文章

  • CSS3选择器新增问题的实现_css3_CSS
  • CSS3实现列表无限滚动/轮播效果_css3_CSS
  • CSS3 Tab动画实例之背景切换动态效果_css3_CSS
  • Github上流行的CSS3动画效果库 animate.css
  • CSS3通过var()和calc()函数实现动画特效_css3_CSS
  • CSS3动画之DIY Loading动画
  • CSS中这个函数你会用吗？垂直居中都可以设置
  • 巧用 CSS3的webkit-box-reflect 倒影实现各类动效_css3_CSS
  • CSS3实现的3D隧道效果_css3_CSS
  • CSS3过渡旋转透视2d3d动画等效果的实例代码_css3_CSS

    • CSS3推荐文章

  • 【动画进阶】神奇的卡片 Hover 效果与 Blur 的特性探究
  • 可视化学习：如何生成简单动画让图形动起来
  • 【布局进阶】巧用 :has & drop-shadow 实现复杂布局效果
  • 【动画进阶】神奇的背景，生化危机4日食 Loading 动画还原
  • 【动画进阶】神奇的 3D 磨砂玻璃透视效果
  • 快速构建页面结构的 3D Visualization
  • 详解CSS3.0(Cascading Style Sheet) 层叠级联样式表_css3_CSS
  • CSS3实现的3D隧道效果_css3_CSS
  • CSS3实现的侧滑菜单_css3_CSS
  • CSS3常见动画的实现方式_css3_CSS

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号