动画效果一

仿npm登陆动画

by zhouzhijun01

HTML

<!-- <img src="https://static.npmjs.com/ecc2a793db0bd5966246e970f9c9ff5e.png"> -->
<!-- <img src="https://static.npmjs.com/6bf09f9948c3044dbb2c7ed8b85098dc.png"> -->
<div class="canvas-canvas">
  <div class="animation-sway">
    <div class="wombat">
      <div class="wombat-animation-face">
        <div class="bear-face-base">
          <img src="https://static.npmjs.com/a39ceb9e9ad640f4de8eee094063d890.png" class="bear-eye-blink" />
          <img src="https://static.npmjs.com/ecc2a793db0bd5966246e970f9c9ff5e.png" class="bear-face-blink" />
        </div>
      </div>
      <img src="https://static.npmjs.com/c9e19250d48d66f0e9c70c9b3991bbdb.png" class="bear-body" />
    </div>
  </div>
</div>

CSS

.wombat {
  cursor: grab;
  position: relative;
  top: 20px;
}
.bear-body {
  width: 200px;
  height: 200px;
}
.bear-face-base img {
  left: 0;
  position: absolute;
  top: 0;
}
.bear-face-base {
  width: 58px;
  height: 30px;
  position: absolute;
  top: 100px;
  left: 50%;
  margin-left: -29px;
}
.bear-face-base {
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-name: wombat-blink-eye;
  will-change: opacity;
  display: block;
}
.bear-face-blink {
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-name: wombat-blink-face;
  display: block;
  will-change: opacity;
}
img {
  max-width: 100%;
  border-style: none;
}

@keyframes wombat-blink-eye {
  0% {
    opacity: 1;
  }
  49% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  51% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes wombat-blink-face {
  0% {
    opacity: 0;
  }
  49% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  51% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

/**
  整个身体的动画
*/
.animation-sway {
  animation-name: wombat-happy-go-lucky;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  transform: rotate(-5deg);
  transition-timing-function: ease;
  transform-origin: bottom center;
  will-change: transform;
}

@keyframes wombat-happy-go-lucky {
  0% {
    transform: rotate(-4deg);
  }
  50% {
    transform: rotate(4deg);
  }
  100% {
    transform: rotate(-4deg);
  }
}

.canvas-canvas {
  background: #ddd;
  border-radius: 999px;
  height: 200px;
  width: 200px;
  margin: 0 auto 20px;
  overflow: hidden;
  position: relative;
  transition: background 200ms ease;
}

.wombat-animation-face {
  animation-name: wombat-face-bounce;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
  will-change: transform;
}

@keyframes wombat-face-bounce {
  0% {
    transform: translateY(0)
  }
  50% {
    transform: translateY(-3px)
  }
  100% {
    transform:...