正在直播-动画

正在直播之样式书写

<template>
 <div class="live_status">
   <div class="spinner">
     <div class="move1"></div>
     <div class="move2"></div>
     <div class="move3"></div>
   </div>
   <span>正在直播</span>
  </div>
</template>  

<style>
 .live_status{
    width: 100px;
    height: 26px;
    padding: 2px 4px;
    display: flex;
    align-items: center;
    border-radius: 2px;
    color: #fff;
    background: linear-gradient(101.49deg,#e6426d 1.41%,#dc4888 98.59%);
    font-size: 14px;
    font-weight: 400;
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
  }
  .spinner{
      display: flex;
      height: 22px;
      width:22px;
      color: #fff;
      padding: 0 4px;
      margin-right:5px;
    }
    .spinner>div{
      background: #fff;
    }
    .spinner .move1{
      width:2px;
      animation: .8s .1s living linear infinite backwards normal;
    }
    .spinner .move2{
      width:2px;
      margin-left: 4px;
      animation: .8s .3s living linear infinite backwards normal;
    }
    .spinner .move3{
      width:2px;
      margin-left: 4px;
      animation: .8s .6s living linear infinite backwards normal;
    }
    @keyframes living{
      0%{
        transform:scaleY(0.6);
      }
      50%{
        transform:scaleY(.3);
      }
      100%{
        transform:scaleY(0.6);
      }
    }
</style>