如何使jQuery中的文本发光效果？

问题描述

我想在文本上做一个真实的闪亮效果，我试着用纯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：nnth-child（1） '）.removeClass（'shine'）; $（'div span：nth-​​child（2）'）。addClass（'shine'）;}，400）; setTimeout（function（）{$（'div span：n （'）'）; $（'div'：nth-​​child（3）'）。addClass（'shine'）;}，600）; setTimeout（function（）{$（ 'div span：nth-​​child（3）'）。removeClass（'shine'）; $（'div span：nnth-child（4）'）。addClass（'shine'）;}，800）;}，1000 ）;}）;  

  div {height：50px;行高：50像素;背景：＃3498分贝;颜色：#CCC; FONT-FAMILY：宋体;字体重量：粗体;字体大小：40像素;文本转换：大写; 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> <跨度> T< /跨度> <跨度> e控制/跨度> <跨度> X< /跨度> < span> t< / span>< / div>  

$ b

我在寻找类似的东西

解决方案

与元素之前的有些接近。

CSS解决方法

$ b 缺点：div的背景色和之前元素的背景色必须比赛。例如，在这个例子中它是白色的。
不同的颜色会使得闪亮的直角色明显可见。

div {box-sizing：border-box;} body {margin：0px;} div：before {content：'';位置：绝对; width：20px; height：50px;动画：幻灯片1s线性无限; transform：rotate（30deg）;} div {height：50px; font-size：40px;背景颜色：白色; width：200px;} @ keyframes slide {from {left：-10px;背景：rgba（255,255,255,0.5）; }到{left：190px;背景：rgba（255,255,255,0.5）; }} < div> < / div>

I want to make a realistic shining effect over a text, I've tried solving it with pure css but ended up with this.

$(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>

I'm looking for something similar to this

解决方案

Somewhat close, with the before element.

A pure CSS workaround

Drawback: div's background-color and before element's background-color must match. For instance, it is white in this example.Different colors would make the shine's rectanlge quite obviously visible.

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>

这篇关于如何使jQuery中的文本发光效果？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！