javascript - 如何在 jQuery 中对文本产生闪光效果？

Question

我想在文本上做一个逼真的 Shiny 效果，我试过用纯 css 解决它，但最终还是这样。

$(function() {
    setInterval(function() {
        setTimeout(function() {
            $('div span:nth-child(4)').removeClass('shine');
            $('div span:nth-child(1)').addClass('shine');
        }, 200);
        setTimeout(function() {
            $('div span:nth-child(1)').removeClass('shine');
            $('div span:nth-child(2)').addClass('shine');
        }, 400);
        setTimeout(function() {
            $('div span:nth-child(2)').removeClass('shine');
            $('div span:nth-child(3)').addClass('shine');
        }, 600);
        setTimeout(function() {
            $('div span:nth-child(3)').removeClass('shine');
            $('div span:nth-child(4)').addClass('shine');
        }, 800);
    }, 1000);
});

div{
  height:50px;
  line-height:50px;
  background:#3498db;
  color:#ccc;
  font-family:tahoma;
  font-weight:bold;
  font-size:40px;
  text-transform:uppercase;
  text-align:center;
}
div span{
  -webkit-transition: color 0.5s;
   transition: color 0.5s;
}
.shine{
  color:#fcfcfc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <span>T</span>
  <span>e</span>
  <span>x</span>
  <span>t</span>
</div>

我正在寻找类似的东西

Answer 1

有点接近，有 before 元素。

纯 CSS 解决方法

缺点:div 的背景颜色和before 元素的背景颜色必须匹配。例如，在这个例子中它是白色的。不同的颜色会使光泽的矩形非常明显可见。

div {
  box-sizing: border-box;
}
body {
  margin: 0px;
}
div:before {
  content: ' ';
  position: absolute;
  width: 20px;
  height: 50px;
  animation: slide 1s linear infinite;
  transform: rotate(30deg);
}
div {
  height: 50px;
  font-size: 40px;
  background-color: white;
  width: 200px;
}
@keyframes slide {
  from {
    left: -10px;
    background: rgba(255, 255, 255, 0.5);
  }
  to {
    left: 190px;
    background: rgba(255, 255, 255, 0.5);
  }
}

<div>
  THIS
</div>