如何在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元素的背景颜色必须匹配。例如，在此示例中为白色。 不同的颜色会使闪耀的矩形明显可见。

＆＃13;

＆＃13;

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);
  }
}

＆＃13;

<div>
  THIS
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

选中此项以在css中创建闪亮效果：

<a href="#" class="icon">let</a>
<a href="#" class="icon">it</a>
<a href="#" class="icon">shine</a>

/**
 * Icon
 */

.icon {
  position: relative;
  overflow: hidden;
  width: 50px;
  height: 50px;
  display: inline-block;

  margin: 25px 0 25px 25px;
  border-radius: 5px;
  color: #fff;
  text-decoration: none;
  text-align: center;
  line-height: 50px;
  font-size: 12px;
  font-family: sans-serif;
}

.icon:nth-child(1) { background: cornflowerblue; }
.icon:nth-child(2) { background: salmon; }
.icon:nth-child(3) { background: gray; }

/**
 * The "shine" element
 */

.icon:after {
  content: "";
  position: absolute;
  top: -110%;
  left: -210%;
  width: 200%;
  height: 200%;
  opacity: 0;
  transform: rotate(30deg);

  background: rgba(255, 255, 255, 0.13);
  background: linear-gradient(
    to right, 
    rgba(255, 255, 255, 0.13) 0%,
    rgba(255, 255, 255, 0.13) 77%,
    rgba(255, 255, 255, 0.5) 92%,
    rgba(255, 255, 255, 0.0) 100%
  );
}

/* Hover state - trigger effect */

.icon:hover:after {
  opacity: 1;
  top: -30%;
  left: -30%;
  transition-property: left, top, opacity;
  transition-duration: 0.7s, 0.7s, 0.15s;
  transition-timing-function: ease;
}

/* Active state */

.icon:active:after {
  opacity: 0;
}

https://jsfiddle.net/gilsongilbert/2yd7megn/1/