Emoji跳舞
2020-05-01 / CHINQ / / 1 min. read

Emoji

  • 见过 Emoji 吧
  • 见过 Emoji 跳舞吗?
  • 来看看吧
  • 👇



    😂 😂 😂 😂 😂



HTML 部分


<div class="emoji">
  <span>😂</span>
  <span>😂</span>
  <span>😂</span>
  <span>😂</span>
  <span>😂</span>
</div>

CSS 部分


.emoji {position: absolute;top: 50%;left: 50%;}
.emoji span {position: absolute;display: inline-block;animation: circles 4s infinite linear;}
.emoji span:nth-child(1) {animation-delay: 0s;}
.emoji span:nth-child(2) {animation-delay: 0.8s;}
.emoji span:nth-child(3) {animation-delay: 1.6s;}
.emoji span:nth-child(4) {animation-delay: 2.4s;}
.emoji span:nth-child(5) {animation-delay: 3.2s;}
.emoji span:nth-child(6) {animation-delay: 4s;}
.emoji span:nth-child(7) {animation-delay: 4.8s;}
@keyframes circles {
0% {transform: translate3d(0, 20px, 0) scale(1.3);}
25% {transform: translate3d(-120px, 0, -120px) scale(1);}
50% {transform: translate3d(0, -20px, 0) scale(0.7);}
75% {transform: translate3d(120px, 0, 120px) scale(1);}
100% {transform: translate3d(0, 20px, 0) scale(1.3);}}

作者

CodePen

😀
本文链接:
https://www.cqbg.ga/2020/05/01/Emoji%E8%B7%B3%E8%88%9E/