在数据大屏可视化 项目中，经常需要特效来装饰效果，使页面看起来酷炫，今天收集到的效果是闪烁效果。从一端依次循环从透明变为不透明再变为透明，让页面看起来有一种闪烁的动画效果。

效果演示地址

数据可视化显示系统

通过js实现从下到上依次变化效果代码

效果截图

html

<div class="jz1">
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

css

.jz1 {
  opacity: 0;
  animation: show4 0.1s linear forwards 3.8s;
  position: relative;

  ul {
    width: 30px;
    height: 400px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;

    li {
      width: 100%;
      height: 8%;
      margin: 40% 0;
      background-color: #ff7a9a;
    }
  }
}

@keyframes show4 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

js

function jz() {
  $('.jz1 ul li').each((index, item) => {
    item.style.opacity = 1 - index / 10;
  })
  setInterval(() => {
    $('.jz1 ul li').each((index, item) => {
      if (item.style.opacity == 0) {
        item.style.opacity = 1
      }
      item.style.opacity = parseFloat(item.style.opacity) - 0.1
    })
  }, 100)
}
jz()