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

我想在一个文本上产生一个真实的闪光效果，我曾尝试用纯css解决它，但最终得到了这个效果

$（函数（）{
setInterval（函数（）{
setTimeout（函数（）{
$（'div span:nth child（4）'）。移除类（'shine'）；
$（'div span:nth child（1）'）.addClass（'shine'）；
}, 200);
setTimeout（函数（）{
$（'div span:nth child（1）'）。移除类（'shine'）；
$（'div span:nth child（2）'）.addClass（'shine'）；
}, 400);
setTimeout（函数（）{
$（'div span:nth child（2）'）。移除类（'shine'）；
$（'div span:nth child（3）'）.addClass（'shine'）；
}, 600);
setTimeout（函数（）{
$（'div span:nth child（3）'）。移除类（'shine'）；
$（'div span:nth child（4）'）.addClass（'shine'）；
}, 800);
}, 1000);
});
div{
高度：50px；
线高：50px；
背景：#3498db；
颜色：#ccc；
字体系列：tahoma；
字体大小：粗体；
字体大小：40px；
文本转换：大写；
文本对齐：居中；
}
分区跨度{
-webkit过渡：颜色0.5s；
过渡：颜色0.5s；
}
.发光{
颜色：#fcfc；
}

T
E
x
T
检查此选项，以在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;
}


/**
*图标
*/
.图标{
位置：相对位置；
溢出：隐藏；
宽度：50px；
高度：50px；
显示：内联块；
利润率：25px 0 25px 25px；
边界半径：5px；
颜色：#fff；
文字装饰：无；
文本对齐：居中；
线高：50px；
字体大小：12px；
字体系列：无衬线；
}
.icon:nth child（1）{背景：矢车菊蓝；}
.icon:n子（2）{背景：鲑鱼；}
.icon:n子（3）{背景：灰色；}
/**
*“发光”元素
*/
.图标：之后{
内容：“；
位置：绝对位置；
前-110%；
左-210%；
宽度：200%；
身高：200%；
不透明度：0；
变换：旋转（30度）；
背景：rgba（255，255，255，0.13）；
背景：线性梯度(
对,，
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%
);
}
/*悬停状态-触发效应*/
.图标：悬停：之后{
不透明度：1；
前-30%；
左-30%；
过渡属性：左、上、不透明度；
过渡时间：0.7s、0.7s、0.15s；
过渡时间功能：轻松；
}
/*活动状态*/
.图标：活动：之后{
不透明度：0；
}

检查此选项，以在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;
}


/**
*图标
*/
.图标{
位置：相对位置；
溢出：隐藏；
宽度：50px；
高度：50px；
显示：内联块；
利润率：25px 0 25px 25px；
边界半径：5px；
颜色：#fff；
文字装饰：无；
文本对齐：居中；
线高：50px；
字体大小：12px；
字体系列：无衬线；
}
.icon:nth child（1）{背景：矢车菊蓝；}
.icon:n子（2）{背景：鲑鱼；}
.icon:n子（3）{背景：灰色；}
/**
*“发光”元素
*/
.图标：之后{
内容：“；
位置：绝对位置；
前-110%；
左-210%；
宽度：200%；
身高：200%；
不透明度：0；
变换：旋转（30度）；
背景：rgba（255，255，255，0.13）；
背景：线性梯度(
对,，
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%
);
}
/*悬停状态-触发效应*/
.图标：悬停：之后{
不透明度：1；
前-30%；
左-30%；
过渡属性：左、上、不透明度；
过渡时间：0.7s、0.7s、0.15s；
过渡时间功能：轻松；
}
/*活动状态*/
.图标：活动：之后{
不透明度：0；
}

有点接近，在
元素之前加上

纯CSS解决方案

缺点：div的背景色和
元素的背景色之前的
必须匹配。例如，在本例中它是白色的。
不同的颜色会使光泽的矩形非常明显


div{
框大小：边框框；
}
身体{
边际：0px；
}
部门：以前{
内容：''；
位置：绝对位置；
宽度：20px；
高度：50px；
动画：幻灯片1s线性无限；
变换：旋转（30度）；
}
div{
高度：50px；
字体大小：40px；
背景色：白色；
宽度：200px；
}
@关键帧滑动{
从{
左：-10px；
背景：rgba（255,255,255,0.5）；
}
到{
左：190px；
背景：rgba（255,255,255,0.5）；
}
}

这
有点接近，元素前面有

纯CSS解决方案

缺点：div的背景色和
元素的背景色之前的
必须匹配。例如，在本例中它是白色的。
不同的颜色会使光泽的矩形非常明显


div{
框大小：边框框；
}
身体{
边际：0px；
}
部门：以前{
内容：''；
位置：绝对位置；
宽度：20px；
高度：50px；
动画：幻灯片1s线性无限；
变换：旋转（30度）；
}
div{
高度：50px；
字体大小：40px；
背景色：白色；
宽度：200px；
}
@关键帧滑动{
从{
左：-10px；
背景：rgba（255,255,255,0.5）；
}
到{
左：190px；
背景：rgba（255,255,255,0.5）；
}
}

这
尝试使用css gradientstry和css gradientsyeah，只要有帮助！！：）是的，只要有帮助！！：）