纯CSS实现 | yoyo摸鱼(click)

jayjay

发布于 2022-11-02 16:56:58

4040

发布于 2022-11-02 16:56:58

文章被收录于专栏：jay_blog

前言

掘金是一个技(摸)术(鱼)社区，每天上班开机第一时间就是打开掘金快乐的学(摸)习(鱼)，借着代码块的功能推出，今天来用自己的渣渣CSS试着画一下yoyo摸鱼(click)

代码块

https://code.juejin.cn/pen/7086763751239581708

代码实现

1.yoyo

yoyo由肥胖的身体+眼睛+嘴巴+小手手组成

1.1 yoyo身体(包括眼睛和嘴巴)

yoyo的身体的布局就是一个div,通过伪元素::before和::after画出两个椭圆的四分之一组成，使用css的border-radius: 100% 0 0 0给一个角100%就能取到四分之一,通过定位两个半圆组在一起，嘴巴和眼睛基本同理，只是使用了transform: rotate来微调角度，使之更生动

html

<div class="yoyo-body">
    <div class="eye-left"></div>
    <div class="eye-right"></div>
    <div class="mouth"></div>
</div>

css

  .yoyo-body::before {
    content: "";
    width: 115px;
    height: 200px;
    border-top: 2px solid black;
    border-left: 2px solid black;
    background: #fff;
    display: block;
    position: absolute;
    top: 100px;
    left: 200px;
    border-radius: 100% 0 0 0;
    background-color: #1E80FF;
  }

  .yoyo-body::after {
    content: "";
    width: 87px;
    height: 200px;
    border-right: 2px solid black;
    border-top: 2px solid black;
    background: #fff;
    display: block;
    position: absolute;
    top: 100px;
    left: 317px;
    border-radius: 0 100% 0 0;
    background-color: #1E80FF;
  }

  .eye-left {
    width: 5px;
    height: 5px;
    /* border-top: 2px solid black; */
    border-right: 2px solid black;
    border-bottom: 2px solid black;
    /* border-left: 2px solid black; */
    border-radius: 30% 0 70% 0;
    transform: rotate(45deg);
    /* border-radius: 50%; */
    position: absolute;
    top: 155px;
    left: 291px;
  }

  .eye-right {
    width: 5px;
    height: 5px;
    /* border-top: 2px solid black; */
    border-right: 2px solid black;
    border-bottom: 2px solid black;
    /* border-left: 2px solid black; */
    border-radius: 30% 0 70% 0;
    transform: rotate(40deg);
    /* border-radius: 50%; */
    position: absolute;
    top: 157px;
    left: 316px;
    z-index: 3;
  }


  .mouth {
    width: 53px;
    height: 12px;
    /* border-top: 2px solid black; */
    /* border-right: 2px solid black; */
    border-bottom: 2px solid black;
    border-left: 2px solid black;
    border-radius: 0 0 20% 80%;
    position: relative;
    top: 157px;
    left: 272px;
    z-index: 3;
  }

  .mouth::after {
    content: "";
    width: 11px;
    height: 9px;
    display: block;
    /* border-top: 2px solid black; */
    border-right: 2px solid black;
    border-bottom: 2px solid black;
    /* border-left: 2px solid black; */
    border-radius: 0 0 20px 0px;
    position: relative;
    top: -4px;
    left: -11px;
    transform: rotate(-20deg);
  }

1.2 yoyo的小手手

小手手比较简单，其实就是两个矩形圆角后组成，然后定位到合适的位置 html

<div class="yoyo-body">
    <div class="eye-left"></div>
    <div class="eye-right"></div>
    <div class="mouth"></div>
    <!-- 小手手 -->
    <div class="hand-left"></div>
    <div class="hand-right"></div>
</div>

css

  .hand-left {
    width: 50px;
    height: 50px;
    border-top: 2px solid black;
    border-right: 2px solid black;
    border-bottom: 2px solid black;
    /* border-left: 2px solid black; */
    border-radius: 150px 300px 300px 150px;
    background-color: #1E80FF;
    position: absolute;
    top: 221px;
    left: 234px;
    z-index: 4;
    transition: all 1s;
    animation: momo 2s infinite;
    transform-origin: 100% 95%;
  }

  .hand-right {
    width: 50px;
    height: 50px;
    border-top: 2px solid black;
    /* border-right: 2px solid black; */
    border-bottom: 2px solid black;
    border-left: 2px solid black;
    border-radius: 300px 150px 150px 300px;
    background-color: #1E80FF;
    position: absolute;
    top: 221px;
    left: 327px;
    z-index: 4;
    transition: all 1s;
    animation: momo 2s infinite;
    transform-origin: 100% 95%;
  }

再给小手手加上动画，使之看起来像摸的效果

@keyframes momo {
    0% {
      transform: rotate(0deg);
    }

    50% {
      transform: rotate(-5deg);
    }

    100% {
      transform: rotate(5deg);
    }
  }

2. click

click的眼睛是一个椭圆然后中间有个白色背景的div组成，嘴巴则是三个不同大小和背景颜色的圆组成，由于水平有限，画的比较难看，再使用transform: rotate调整角度，click的身体直接用svg生成了，真的不会玩圆角三角形。。。

html

<div class="click-div">
  <div class="click">
    <svg width="250" height="100" viewBox="-50 -50 300 300">
      <polygon class="triangle" stroke-linejoin="round" points="100,0 40,200 200,200" />
    </svg>
  </div>

  <div class="click-eye-left"></div>
  <div class="click-eye-right"></div>
  <div class="click-mouth"></div>
</div>

css

  .click {
    transform: rotate(60deg);
    position: absolute;
    top: 182px;
    left: 181px;
    z-index: 3;
  }

  .click {
    fill: #20DFB0;
    stroke: #20DFB0;
    stroke-width: 80;
  }

  .click-eye-left {
    width: 10px;
    height: 20px;
    border: 2px solid black;
    background-color: black;
    border-radius: 50%;
    transform: rotate(180deg);
    position: absolute;
    top: 198px;
    left: 299px;
  }

  .click-eye-left::before {
    content: "";
    display: block;
    width: 10px;
    height: 15px;
    background-color: white;
    border-radius: 2px;
    /* z-index: 4; */

  }


  .click-eye-right {
    width: 10px;
    height: 20px;
    border: 2px solid black;
    background-color: black;
    border-radius: 50%;
    transform: rotate(180deg);
    position: absolute;
    top: 197px;
    left: 310px;
    z-index: 2;
  }

  .click-eye-right::before {
    content: "";
    display: block;
    width: 10px;
    height: 15px;
    background-color: white;
    border-radius: 2px;
    /* z-index: 4; */

  }

  .click-mouth {
    width: 15px;
    height: 10px;
    border: 2px solid black;
    background-color: #FC85B1;
    border-radius: 50%;
    transform: rotate(-10deg);
    position: absolute;
    top: 215px;
    left: 304px;
    z-index: 3;
  }

  .click-mouth::before {
    content: "";
    display: block;
    width: 5px;
    height: 5px;
    border: 2px solid black;
    background-color: #20DFB0;
    border-radius: 50%;
    transform: rotate(-10deg);
    position: relative;
    top: 1px;
    left: 3px;
    z-index: 4;
  }

  .click-mouth::after {
    content: "";
    display: block;
    width: 5px;
    height: 5px;
    border-top: 2px solid #FC85B1;
    border-bottom: 2px solid black;
    border-left: 2px solid black;
    border-right: 2px solid black;
    background-color: #FC85B1;
    border-radius: 50%;
    transform: rotate(-25deg);
    position: relative;
    top: 0px;
    left: 9px;
    z-index: 4;
  }

3.星星

星星的直接很简单，就直接用✦这个符号代替就行，接着使用动画操作透明度来达到闪烁的效果

css

<div class="star star1">✦</div>
<div class="star star2">✦</div>
<div class="star star3">✦</div>
<div class="star star4">✦</div>

html

  .star {
    font-size: 10px;
    color: #E9CF17;
  }

  .star1 {
    position: absolute;
    top: 119px;
    left: 222px;
    animation: buling 0.5s ease infinite alternate;
  }

  .star2 {
    position: absolute;
    top: 73px;
    left: 278px;
    z-index: 99;
    animation: buling 0.5s ease infinite alternate;
  }

  .star3 {
    position: absolute;
    top: 81px;
    left: 360px;
    z-index: 99;
    animation: buling 0.5s ease infinite alternate;
  }

  .star4 {
    position: absolute;
    top: 129px;
    left: 393px;
    z-index: 99;
    animation: buling 0.5s ease infinite alternate;
  }
  
  @keyframes buling {
    0% {
      opacity: 1;
    }

    100% {
      opacity: 0;
    }