纯CSS实现，不仅仅是yoyo摸鱼

2023-10-01 01:11:26

前言

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

yoyo摸鱼动画实现

HTML结构

<div class="yoyo-fish">
  <div class="fish-body">
    <div class="fish-head">
      <div class="fish-eye left"></div>
      <div class="fish-eye right"></div>
      <div class="fish-mouth"></div>
    </div>
    <div class="fish-fin top"></div>
    <div class="fish-fin bottom"></div>
  </div>
</div>

CSS样式

.yoyo-fish {
  width: 200px;
  height: 100px;
  position: relative;
  animation: yoyo-fish 2s infinite alternate;
}

@keyframes yoyo-fish {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(200px);
  }
  100% {
    transform: translateX(0);
  }
}

.fish-body {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ff0000;
  border-radius: 50%;
}

.fish-head {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  background-color: #ffffff;
  border-radius: 50%;
}

.fish-eye {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  background-color: #000000;
  border-radius: 50%;
}

.fish-eye.left {
  left: 20%;
}

.fish-eye.right {
  left: 80%;
}

.fish-mouth {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  background-color: #000000;
  border-radius: 50%;
}

.fish-fin {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  width: 20px;
  height: 20px;
  background-color: #ff0000;
  border-radius: 50%;
}

.fish-fin.top {
  top: 20%;
}

.fish-fin.bottom {
  bottom: 20%;
}