css实现心跳图

做个小demo，熟悉一下transform和animation属性，心心图，看效果先~
实现代码如下：

1. html代码

  <div class="heartbeat">
    <ul>
      <li class="list1"></li>
      <li class="list2"></li>
      <li class="list3"></li>
      <li class="list4"></li>
      <li class="list5"></li>
      <li class="list6"></li>
      <li class="list7"></li>
      <li class="list8"></li>
      <li class="list9"></li>
    </ul>
  </div>

2. css代码

    .heartbeat {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;  /* vh是相对视口单位 100vh=100% * 视口高度*/
      background-color: #82589F;
    }
    ul {
      list-style: none;
    }
    ul>li {
      float: left;
      width: 20px;
      height: 20px;
      border-radius: 10px;
      margin-right: 20px;
    }
    .list1 {
      background-color: #FEA47F;
      animation: heart1 4s infinite;
    }
    .list2 {
      background-color: #25CCF7;
      animation: heart2 4s infinite 0.15s;
    }
    .list3 {
      background-color: #EAB543;
      animation: heart3 4s infinite 0.3s;
    }
    .list4 {
      background-color: #58B19F;
      animation: heart4 4s infinite 0.45s;
    }
    .list5 {
      background-color: #FD7272;
      animation: heart5 4s infinite 0.6s;
    }
    .list6 {
      background-color: #55E6C1;
      animation: heart4 4s infinite 0.75s;
    }
    .list7 {
      background-color: #F8EFBA;
      animation: heart3 4s infinite 0.9s;
    }
    .list8 {
      background-color: #1B9CFC;
      animation: heart2 4s infinite 1.05s;
    }
    .list9 {
      background-color: #F97F51;
      animation: heart1 4s infinite 1.2s;
    }
 
   @keyframes heart1 {
     25%,
     50% {
       height: 60px;
       transform: translateY(-30px);
     }
     75%,
     100% {
       height: 20px;
       transform: translateY(0px);
     }
   }
   @keyframes heart2 {
     25%,
     50% {
       height: 125px;
       transform: translateY(-60px);
     }
     75%,
     100% {
       height: 20px;
       transform: translateY(0px);
     }
   }
   @keyframes heart3 {
     25%,
     50% {
       height: 160px;
       transform: translateY(-70px);
     }
     75%,
     100% {
       height: 20px;
       transform: translateY(0px);
     }
   }
   @keyframes heart4 {
     25%,
     50% {
       height: 180px;
       transform: translateY(-50px);
     }
     75%,
     100% {
       height: 20px;
       transform: translateY(0px);
     }
   }
   @keyframes heart5 {
     25%,
     50% {
       height: 190px;
       transform: translateY(-30px);
     }
     75%,
     100% {
       height: 20px;
       transform: translateY(0px);
     }
   }

啦啦啦，其实就是这样啦，用动画的延时还有translate就可以实现这样一个好看的心心图。