css画一个皮卡丘

最新推荐文章于 2021-10-31 15:46:00 发布

o_heart

最新推荐文章于 2021-10-31 15:46:00 发布

阅读量4.7k

点赞数 29

分类专栏： css 文章标签： css 皮卡丘

本文链接：https://blog.youkuaiyun.com/original_heart/article/details/91358700

版权

css 专栏收录该内容

4 篇文章

订阅专栏

最近皮神火了，萌萌哒，很阔耐。那么用css能不能画个皮神呢？赶紧来试一下吧～

 <div class="pikaqiu-container">
    <div class="eye eye-left"></div>
    <div class="eye eye-right"></div>
    <div class="nose"></div>
    <div class="upperLip"></div>
    <div class="lowerLip"></div>
    <div class="face face-left"></div>
     <div class="face face-right"></div>
  </div>

   *{
      margin: 0;
      padding: 0;
    }
    body{
      background: #ffe000;
    }
    .pikaqiu-container{
      position: relative;
      width: 440px;
      height: 250px;
      margin: 30px auto 30px;
    }
    .eye{
      position: absolute;
      top: 20px;
      width: 60px;
      height: 60px;
      border: 2px solid #000;
      border-radius: 50%;
      background: #2e2e2e;
    }
    .eye::after{
      content: '';
      display: block;
      width: 30px;
      height: 30px;
      background: #FFF;
      border: 2px solid #000;
      border-radius: 50%;
      margin-left: 8px;
    }
    .eye-left{
      left: 70px; 
    }
    .eye-right{
      right: 70px;
    }
    .nose{
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: 50px;
      width: 0;
      border-top: 20px solid #000;
      border-bottom: none;
      border-left: 20px solid transparent;
      border-right: 20px solid transparent;
      border-top-left-radius: 50%;
      border-top-right-radius: 50%;
    }
    .upperLip{
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 80px;
        display: flex;
        z-index: 1;
    }
    .upperLip::before{
      content: '';
      display: block;
      width: 80px;
      height: 20px;
      border: 3px solid #000;
      transform: rotate(-20deg);
      border-top: none;
      border-right: none;
      border-bottom-left-radius: 76% 96%;
      background: #ffe000;
    }
    .upperLip::after{
      content: '';
      display: block;
      width: 80px;
      height: 20px;
      border: 3px solid #000;
      transform: rotate(20deg);
      border-top: none;
      border-left: none;
      border-bottom-right-radius: 76% 96%;
      background: #ffe000;
    }
    .lowerLip{
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: 88px;
      width: 124px;
      height: 150px;
      background: #9d0512;
      border: 2px solid #000;
      border-top: none;
      border-bottom-left-radius: 62px 150px;
      border-bottom-right-radius: 62px 150px;
      overflow: hidden;
    }
    .lowerLip:after{
      content: '';
      display: block;
      width: 166px;
      height: 166px;
      border-radius: 50%;
      background: #fc4653;
      margin: 22px auto 0;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }
    
    .face{
      position: absolute;
      bottom: 20px;
      width: 80px;
      height: 80px;
      background: #fb0d1c;
      border: 2px solid #000;
      border-radius: 50%;
    }
    .face-left{
       left: 10px;
    }
    .face-right{
      right: 10px;
    }