美文网首页
用css3画一个属于自己的蓝胖子(下)

用css3画一个属于自己的蓝胖子(下)

作者: 莫晓白 | 来源:发表于2017-07-11 19:57 被阅读0次

    接上回,我们把蓝胖子的头画齐了,现在我们画他的项圈和铃铛
    在header中添加一组div

    <div class="necklet_wrap">
      <div class="necklet_border"></div>
    </div>
    
    .necklet_wrap {
      width: 100%;
      height: 400px;
    }
    .necklet_border {
      width: 314px;
      height: 260px;
      margin: -242px auto;
      border-radius: 50%;
      background-color: #e5002a;
      border: 2px solid #1f1f1f;
    }
    
    image.png

    好,我们的蓝胖子就快完成了,只需要在添加上,黄色的铃铛就可以了。
    在necklet_wrap中我们添加一组div用作蓝胖子的铃铛

    <div class="bell_wrap">
     <div class="bell_border">
       <div class="bell_rounded"></div>
       <div class="bell_circle"></div>
       <div class="bell_line"></div>
     </div>
    </div>
    

    铃铛需要四部分组成,我们一个一个来,先规定外框的大小,再画一个球

    .bell_wrap {
      width: 100%;
      height: 100px;
    }
    .bell_border {
      width: 65px;
      height: 65px;
      margin: 228px auto 0;
      border-radius: 50%;
      background-color: #f5e842;
      border: 2px solid #1f1f1f;
    }
    
    image.png

    再添加一些铃铛的细节

    .bell_rounded {
      width: 65px;
      height: 10px;
      margin: 13px 0 0 -2px;
      border-radius: 10px;
      border: 2px solid #1f1f1f;
      background-color: #f5e842;
    }
    
    image.png

    再添加铃铛中空的圆形和分界线,让铃铛看起来更加立体

     .bell_circle {
       width: 14px;
       height: 14px;
       margin: 9px auto 0;
       border-radius: 50%;
       border: 2px solid #1f1f1f;
       background-color: #7b6857;
     }
    .bell_line {
      width: 3px;
      height: 17px;
      margin: 0 auto;
      background-color: #1f1f1f;
    }
    
    image.png

    好,现在我们蓝胖子就完成了~

    现在我把代码整体发一下
    html

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="css/index.css">
    </head>
    <body>
    <!--画布-->
    <div class="main_container">
        <div class="head_wrap">
            <div class="header">
               <div class="face">
                   <!--眼睛-->
                   <div class="eye_wrap">
                       <div class="eye_inner_container">
                           <div class="eye_left">
                               <div class="eye">
                                   <div class="eyeball"></div>
                               </div>
                           </div>
                           <div class="eye_right">
                               <div class="eye">
                                   <div class="eyeball"></div>
                               </div>
                           </div>
                       </div>
                   </div>
                   <!--鼻子-->
                   <div class="nose_wrap">
                       <div class="nose">
                           <div class="nose_white"></div>
                       </div>
                   </div>
                   <!--嘴--> 
                   <div class="mouth_wrap">
                       <div class="mouth_line"></div>
                       <div class="mouth_border">
                           <div class="mouth_black"></div>
                       </div>
                   </div>
                   <!--胡子-->
                   <div class="mustache_wrap">
                       <ul class="mustache_left">
                           <li class="mustache_one">
                               <div class="mustache_line"></div>
                           </li>
                           <li class="mustache_two">
                               <div class="mustache_line"></div>
                           </li>
                           <li class="mustache_three">
                               <div class="mustache_line"></div>
                           </li>
                       </ul>
                       <ul class="mustache_right">
                           <li class="mustache_one">
                               <div class="mustache_line"></div>
                           </li>
                           <li class="mustache_two">
                               <div class="mustache_line"></div>
                           </li>
                           <li class="mustache_three">
                               <div class="mustache_line"></div>
                           </li>
                       </ul>
                   </div>
               </div>
               <!--项圈--> 
               <div class="necklet_wrap">
                   <div class="necklet_border"></div>
                   <!--铃铛-->
                   <div class="bell_wrap">
                       <div class="bell_border">
                           <div class="bell_rounded"></div>
                           <div class="bell_circle"></div>
                           <div class="bell_line"></div>
                       </div>
                   </div>
               </div>
            </div>
        </div>
    </div>
    </body>
    </html>
    

    CSS

    * {
      margin: 0;
      padding: 0;
      text-decoration: none;
      box-sizing: border-box;
      list-style: none;
    }
    
    .main_container {
      width: 565px;
      height: 560px;
      margin: 0 auto;
      overflow: hidden; }
    
    .head_wrap {
      width: 405px;
      height: 650px;
      margin: 40px auto 0;
      overflow: hidden; }
    
    .header {
        width: 400px;
        height: 365px;
        background-color: #089ce4;
        border-radius: 50%;
        border: 2px solid #1f1f1f;
        margin: 0 auto;
    }
    .face {
      width: 360px;
      height: 300px;
      margin: 65px auto 0;
      border-radius: 50%;
      border: 2px solid #1f1f1f;
      background-color: #ffffff;
      position: relative;
    }
    .eye_wrap {
      width: 100%;
      height: 106px;
    }
    .eye_inner_container {
      width: 172px;
      margin: -40px auto 0;
    }
    .eye_left,.eye_right {
      width: 86px;
      height: 104px;
      border: 2px solid #1f1f1f;
      border-radius: 50% 50% 50% 50%/55% 60% 45% 45%;
      -webkit-border-radius: 50% 50% 50% 50%/55% 60% 45% 45%;
      float: left;
      position: relative;
      background-color: #ffffff;
    }
    .eye_left {
      transform: rotate(12deg);
      -ms-transform: rotate(12deg);
      -moz-transform: rotate(12deg);
      -webkit-transform: rotate(12deg);
      -o-transform: rotate(12deg);
    }
    .eye_right {
      transform: rotate(-12deg);
      -ms-transform: rotate(-12deg);
      -moz-transform: rotate(-12deg);
      -webkit-transform: rotate(-12deg);
      -o-transform: rotate(-12deg);
      margin: 0 0 0 -1px;
    }
    .eye_left .eye, .eye_right .eye {
      width: 26px;
      height: 34px;
      border-radius: 50%;
      border: 2px solid #1f1f1f;
      background-color: #1f1f1f;
    }
    .eye_left .eye {
      position: absolute;
      left: 40px;
      top: 35px;
      transform: rotate(-10deg);
      -ms-transform: rotate(-10deg);
      -moz-transform: rotate(-10deg);
      -webkit-transform: rotate(-10deg);
      -o-transform: rotate(-10deg);
    }
    .eye_right .eye {
      position: absolute;
      right: 40px;
      top: 35px;
      transform: rotate(10deg);
      -ms-transform: rotate(10deg);
      -moz-transform: rotate(10deg);
      -webkit-transform: rotate(10deg);
      -o-transform: rotate(10deg);
    }
    .eye_left .eye .eyeball, .eye_right .eye .eyeball {
      width: 8px;
      height: 11px;
      background-color: #ffffff;
      border-radius: 50%;
      margin: 8px 6px;
    }
    
    
    .eye_right .eyebrow {
      transform: rotate(-10deg);
      -ms-transform: rotate(-10deg);
      -moz-transform: rotate(-10deg);
      -webkit-transform: rotate(-10deg);
      -o-transform: rotate(-10deg);
      margin: 22px 0 0 2px;
    }
    
    .nose_wrap {
      width: 100%;
      position: relative;
    }
    .nose {
      width: 54px;
      height: 54px;
      position: absolute;
      top: -28px;
      left: 151px;
      border-radius: 50%;
      background-color: #e5002a;
      border: 2px solid #1f1f1f;
      overflow: hidden;
    }
    .nose_white {
      width: 14px;
      height: 14px;
      margin: 12px 17px;
      border-radius: 50%;
      background-color: #ffffff;
    }
    
    .mouth_wrap {
      width: 100%;
      height: 190px;
      overflow: hidden;
    }
    .mouth_line {
      width: 2px;
      height: 130px;
      background-color: #000000;
      margin: 26px auto 0;
    }
    
    .mouth_border {
      width: 100%;
      height: 40px;
      overflow: hidden;
      transform: rotate(180deg);
    }
    .mouth_black {
      width: 120px;
      height: 100px;
      margin: 8px auto 0;
      border: 3px solid #1f1f1f;
      border-radius: 50%;
    }
    
    
    .mustache_wrap {
      width: 100%;
      height: 150px;
      padding: 0 40px;
      position: absolute;
      top: 90px;
    }
    .mustache_wrap ul {
      width: 50%;
      height: 150px;
      float: left;
    }
    .mustache_wrap ul li {
      width: 100%;
      height: 33%;
    }
    .mustache_line {
      width: 90px;
      height: 2px;
      background-color: #000000;
    }
    .mustache_wrap ul.mustache_right li {
      margin: 0 0 0 40px;
    }
    
    .mustache_wrap ul.mustache_left .mustache_one .mustache_line {
      transform: rotate(25deg);
      -ms-transform: rotate(25deg);
      -moz-transform: rotate(25deg);
      -webkit-transform: rotate(25deg);
      -o-transform: rotate(25deg);
      margin: 0 0 0 5px;
    }
    .mustache_wrap ul.mustache_left .mustache_three .mustache_line {
      transform: rotate(-25deg);
      -ms-transform: rotate(-25deg);
      -moz-transform: rotate(-25deg);
      -webkit-transform: rotate(-25deg);
      -o-transform: rotate(-25deg);
      margin: 0 0 0 5px;
    }
    
    .mustache_wrap ul.mustache_right .mustache_one .mustache_line {
      transform: rotate(-25deg);
      -ms-transform: rotate(-25deg);
      -moz-transform: rotate(-25deg);
      -webkit-transform: rotate(-25deg);
      -o-transform: rotate(-25deg); }
    .mustache_wrap ul.mustache_right .mustache_three .mustache_line {
      transform: rotate(25deg);
      -ms-transform: rotate(25deg);
      -moz-transform: rotate(25deg);
      -webkit-transform: rotate(25deg);
      -o-transform: rotate(25deg);
    }
    
    .necklet_wrap {
      width: 100%;
      height: 400px;
    }
    .necklet_border {
      width: 314px;
      height: 260px;
      margin: -242px auto;
      border-radius: 50%;
      background-color: #e5002a;
      border: 2px solid #1f1f1f;
    }
    .bell_wrap {
      width: 100%;
      height: 100px;
    }
    .bell_border {
      width: 65px;
      height: 65px;
      margin: 228px auto 0;
      border-radius: 50%;
      background-color: #f5e842;
      border: 2px solid #1f1f1f;
    }
    .bell_rounded {
      width: 65px;
      height: 10px;
      margin: 13px 0 0 -2px;
      border-radius: 10px;
      border: 2px solid #1f1f1f;
      background-color: #f5e842;
    }
     .bell_circle {
       width: 14px;
       height: 14px;
       margin: 9px auto 0;
       border-radius: 50%;
       border: 2px solid #1f1f1f;
       background-color: #7b6857;
     }
    .bell_line {
      width: 3px;
      height: 17px;
      margin: 0 auto;
      background-color: #1f1f1f;
    }
    

    相关文章

      网友评论

          本文标题:用css3画一个属于自己的蓝胖子(下)

          本文链接:https://www.haomeiwen.com/subject/ipgmhxtx.html