CSS动画 大嘴巴吐豆豆

CSS动画 大嘴巴吐豆豆

HTML

<div class="mouth"></div>

style样式部分

.mouth {
    width:200px;
    height:200px;
    margin-top:100px;
    border-radius: 100px 100px 100px 100px;
    /* background: red; */
    box-shadow: 
              300px 0px 0px -80px #096,
              450px 0px 0px -80px #096,
              600px 0px 0px -80px #096,
              750px 0px 0px -80px #096;
    animation: peas 1s linear infinite;
  }
  @keyframes peas {
    /* 0%{
      box-shadow: 
              300px 0px 0px -80px #096,
              450px 0px 0px -80px #096,
              600px 0px 0px -80px #096,
              750px 0px 0px -80px #096;
    }
    100%{
      box-shadow: 
              150px 0px 0px -80px #096,
              300px 0px 0px -80px #096,
              450px 0px 0px -80px #096,
              600px 0px 0px -80px #096;
    } */
    0%{
      box-shadow: 
              150px 0px 0px -80px #096,
              300px 0px 0px -80px #096,
              450px 0px 0px -80px #096,
              600px 0px 0px -80px #096;
    }
    100%{
      box-shadow: 
              300px 0px 0px -80px #096,
              450px 0px 0px -80px #096,
              600px 0px 0px -80px #096,
              750px 0px 0px -80px #096;
      
    }
  }
  .mouth:before {
    display: block;
    content: "";
    width:200px;
    height:100px;
    margin-left: 150px;
    background: #03ccbb;
    border-radius: 100px 100px 0 0;
    transform: rotate(-35deg);
    animation: moveTop 1s linear infinite;
  }
  .mouth:after {
    display: block;
    content: "";
    width:200px;
    height:100px;
    margin-left: 150px;
    background: #03ccbb;
    border-radius: 0 0 100px 100px;
    transform: rotate(35deg);
    animation: moveBottom 1s linear infinite;
  }
  @keyframes moveTop {
    0%{transform: rotate(0deg);}
    50%{transform: rotate(-35deg);}
    100%{transform: rotate(0deg);}
  }
  @keyframes moveBottom {
    0%{transform: rotate(0deg);}
    50%{transform: rotate(35deg);}
    100%{transform: rotate(0deg);}
  }

来源抖音里网名为”前端工程师“有次直播中分享的一节课，比较感兴趣就记录下来了。