如何使jQuery中的文本发光效果? [英] How to make a shining effect over a text in jQuery?
本文介绍了如何使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中的文本发光效果?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文