css 直播柱状动图

 

 

.live-anime {
      display: inline-block;
      vertical-align: bottom;
      width: 2px;
      background-color: white;
      border-radius: 2px 2px 0 0;
      margin-left: 2px; 
}
 .live-anime0 {
      height: 8px;
      animation: liveAnime0 1s infinite steps(2); 
}
.live-anime1 {
      height: 12px;
      animation: liveAnime1 1s infinite steps(1); 
}
.live-anime2 {
      height: 4px;
      animation: liveAnime2 1s infinite steps(2); 
}

@keyframes liveAnime0 {
  0% {
    height: 8px; }
  50% {
    height: 4px; }
  100% {
    height: 12px; } 
}

@keyframes liveAnime1 {
  0% {
    height: 12px; }
  50% {
    height: 8px; }
  100% {
    height: 4px; } 
}

@keyframes liveAnime2 {
  0% {
    height: 4px; }
  50% {
    height: 12px; }
  100% {
    height: 8px; } 
}

 

直播页面链接 https://wqs.jd.com/live/list/index.shtml