技術標籤：cssCSS畫藍胖子

Html程式碼

<div class="duola">//哆啦，整體盒子沒什麼用
      <div class="tou">//頭
        <div class="yanjing">//眼睛
          <div class="yan">
            <div></div>
          </div>//左眼
          <div class="yan"
 
>
            <div></div>
          </div>//右眼
        </div>
        <div class="bizi">//鼻子
          <div></div>
        </div>
        <div class="lian">//臉
          <div class="zuo">//左邊鬍子
            <div></div>
            <div></div>
            <div></div>
          </div>
          <div class="bizixian"
 
>//鼻子下線
            <div class="zui">//嘴

            </div>
          </div>

          <div class="you">//右邊鬍子
            <div></div>
            <div></div>
            <div></div>
          </div>
        </div>
      </div>
  </div>
 

css程式碼(需引入less，可以查一下，更加方便)

  .duola{
          padding: 20px;
          width: 200px;
                height:500px;
                position: absolute;
                margin:0 auto;
                left: 0;
                right: 0;
          // background-color: #1CBBB4;
  .tou{
    width: 300px;
    height: 300px;
    background-color:#019FE8;
    border-radius: 50%;
    position: relative;
    border: 1px solid #333333;
  }
  .yanjing{
    text-align: center;

    .yan{
      display: inline-block;
      background-color: #fff;
      width: 50px;
      height: 60px;
      border-radius: 50%;
      position: relative;
      border: 1px solid #333333;
      z-index: 1;
      div{
        width: 20px;
        height: 25px;
        border:8px solid #333333;
        border-radius: 50%;
        position: absolute;
        top: 20px;
        left: 0;
      }
    }
  }
  .bizi{
    position: relative;
    margin: -15px auto 0;
    left: 0;
    right: 0;
    width:40px;
    height:40px;
    background-color:#DE022B;
    position: absolute;
    border: 1px solid #333333;
    border-radius: 50%;
    padding:5px;
    z-index: 1;
    div{
      width:10px;
      height:10px;
      background-color: #FFFFFF;
      border-radius: 50%;
    }
  }
  .lian{
    position: relative;
    margin: -40px auto 0;
    left: 0;
    right: 0;
    width: 260px;
    height:280px;
    background-color: #FFFFFF;
    border: 1px solid #333333;
    border-radius: 48%;
    text-align: center;
    .zuo{
      display: inline-block;
      float: left;
      div{
        margin-top:40px;
        height: 1px;
        width: 80px;
        background-color: #333333;
      }
      div:first-child{
         transform:skewY(20deg);
      }
      div:last-child{
         transform:skewY(-20deg);
      }
    }
    .bizixian{
      display: inline-block;
      width: 1px;
      height: 180px;
      background-color: #333333;
      position: relative;
      .zui{
        position: absolute;
        left:-100px;
        right: 0;
        bottom:0px;
        margin: auto;

        width: 200px;
        height: 40px;
        border-radius: 20px;
        border-bottom: 2px solid #333333;
      }
    }
    .you{
      display: inline-block;
      float: right;
      div{
        margin-top:40px;
        height: 1px;
        width: 80px;
        background-color: #333333;
      }
      div:first-child{
         transform:skewY(-20deg);
      }
      div:last-child{
         transform:skewY(20deg);
      }
    }
  }
  }