如何在jQuery中对文本产生闪亮的效果？

Question

我想对文本做一个真实的闪亮效果,我尝试用纯粹的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>