css样式怎么来做闪光字?

发布网友发布时间：2022-04-30 13:58

共3个回答

懂视网时间：2022-05-14 05:26

在网页中，通常设计师们为了凸显自己的产品主题，总会让文字或者加点特效，比如使文字不停的闪动，或有规律的变色。以便达到吸引人关注的目的。那么除了用ps制作的gif动画外，还有哪些方法可以实现这样的功能特效呢？对于略懂代码的朋友们来说，我们都知道css中文字体样式是有很多种的，例如倾斜、加粗等等。那么这里就给大家介绍一下，如何用css代码做出文字闪动效果，本篇有两种闪动方式可供大家参考。

一、css字体闪动（波浪闪动）具体示例代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title>纯css代码测试文字闪动效果</title>
 <style>
 body{
  background: #000;
 }
 h1.fb-glitch {
  position: relative;
  color: #abff79;
 }
 h1.fb-glitch:before {
  left: -2px;
  text-shadow: 2px 0 #0b391a;
  animation: glitch-anim-2 3s infinite linear alternate-reverse;
 }
 h1.fb-glitch:before, h1.fb-glitch:after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  clip: rect(0, 0, 0, 0);
 }
 h1.fb-glitch:after {
  left: 2px;
  text-shadow: -1px 0 #1b5c16;
  animation: glitch-anim-1 2s infinite linear alternate-reverse;
 }
 @keyframes glitch-anim-1 {
  0% {
  clip: rect(82px, 820px, 98px, 0); }
  5.8823529412% {
  clip: rect(17px, 820px, 4px, 0); }
  11.7647058824% {
  clip: rect(24px, 820px, 44px, 0); }
  17.6470588235% {
  clip: rect(24px, 820px, 111px, 0); }
  23.5294117647% {
  clip: rect(29px, 820px, 45px, 0); }
  29.4117647059% {
  clip: rect(114px, 820px, 115px, 0); }
  35.2941176471% {
  clip: rect(103px, 820px, 22px, 0); }
  41.1764705882% {
  clip: rect(49px, 820px, 32px, 0); }
  47.0588235294% {
  clip: rect(2px, 820px, 10px, 0); }
  52.9411764706% {
  clip: rect(80px, 820px, 44px, 0); }
  58.8235294118% {
  clip: rect(70px, 820px, 30px, 0); }
  64.7058823529% {
  clip: rect(27px, 820px, 79px, 0); }
  70.5882352941% {
  clip: rect(82px, 820px, 112px, 0); }
  76.4705882353% {
  clip: rect(27px, 820px, 2px, 0); }
  82.3529411765% {
  clip: rect(47px, 820px, 104px, 0); }
  88.2352941176% {
  clip: rect(53px, 820px, 102px, 0); }
  94.1176470588% {
  clip: rect(2px, 820px, 90px, 0); }
  100% {
  clip: rect(88px, 820px, 56px, 0); } }

 @keyframes glitch-anim-2 {
  0% {
  clip: rect(88px, 820px, 68px, 0); }
  5.8823529412% {
  clip: rect(75px, 820px, 113px, 0); }
  11.7647058824% {
  clip: rect(80px, 820px, 40px, 0); }
  17.6470588235% {
  clip: rect(70px, 820px, 51px, 0); }
  23.5294117647% {
  clip: rect(47px, 820px, 78px, 0); }
  29.4117647059% {
  clip: rect(61px, 820px, 7px, 0); }
  35.2941176471% {
  clip: rect(94px, 820px, 1px, 0); }
  41.1764705882% {
  clip: rect(26px, 820px, 69px, 0); }
  47.0588235294% {
  clip: rect(91px, 820px, 62px, 0); }
  52.9411764706% {
  clip: rect(8px, 820px, 78px, 0); }
  58.8235294118% {
  clip: rect(17px, 820px, 97px, 0); }
  64.7058823529% {
  clip: rect(66px, 820px, 48px, 0); }
  70.5882352941% {
  clip: rect(66px, 820px, 85px, 0); }
  76.4705882353% {
  clip: rect(46px, 820px, 12px, 0); }
  82.3529411765% {
  clip: rect(69px, 820px, 68px, 0); }
  88.2352941176% {
  clip: rect(38px, 820px, 7px, 0); }
  94.1176470588% {
  clip: rect(83px, 820px, 32px, 0); }
  100% {
  clip: rect(110px, 820px, 95px, 0); } }
 </style>
</head>
<body>
<h1 class="fb-glitch" data-text="文字闪动效果">文字闪动效果</h1>
</body>
</html>

以上代码可直接复制在本地测试，测试效果如下截图：

二、css字体闪动（渐变闪动）具体示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>css代码闪动效果测试</title>
</head>
<body>
<div class="main">
 文字闪动测试：<span class="blink">文字闪动效果</span>
</div>

<style type="text/css">
 .main{
 color: #666;margin-top: 50px;
 }
 @keyframes blink{
 0%{opacity: 1;}
 100%{opacity: 0;}
 }
 @-webkit-keyframes blink {
 0% { opacity: 1; }
 100% { opacity: 0; }
 }
 @-moz-keyframes blink {
 0% { opacity: 1; }
 100% { opacity: 0; }
 }
 @-ms-keyframes blink {
 0% {opacity: 1; }
 100% { opacity: 0;}
 }
 @-o-keyframes blink {
 0% { opacity: 1; }
 100% { opacity: 0; }
 }
 
 .blink{
 color: #dd4814;
 animation: blink 1s linear infinite;
 -webkit-animation: blink 1s linear infinite;
 -moz-animation: blink 1s linear infinite;
 -ms-animation: blink 1s linear infinite;
 -o-animation: blink 1s linear infinite;
 }
</style>
</body>
</html>

以上代码可直接复制在本地测试，测试效果如下截图：

注：第二种渐变方法主要思路是通过改变透明度来实现文字的渐变闪烁

@keyframes blink{} 定义keyframe动画，命名为blink 。

@-webkit-keyframes blink 添加兼容性前缀

.blink{}定义blink类

-webkit-animation:;-moz-animation: ;-ms-animation: -o-animation: ; 其它浏览器兼容性前缀

本篇文章介绍了两种文字闪动特效方法，希望对有需要的朋友有所帮助。

【相关内容推荐】

利用html实现文字闪烁的效果代码

炫酷文字跳动漂浮js特效代码

CSS3实现立体文字动态文字特效

一个网页标题title的闪动提示效果实现思路_javascript技巧

利用纯CSS实现动态的文字效果实例

热心网友时间：2022-05-14 02:34

做闪光字可以用js代码来实现，纯css代码是很难实现的。JavaScript代码如下：
<div id="abc">这里是闪光的字</div>
<script>
var i=0;
function shine(id){
var obj= document.getElementById(id);
if(i==0){obj.style.color="#000";i=1;}else{obj.style.color="red";i=0}
}
setInterval("shine('abc')",100);
</script>

热心网友时间：2022-05-14 03:52

你想要的是这样的效果吗?==========<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
var someText = "Welcome!!"; // the text
var aChar;
var aSentence;
var i=0; // a countervar colors = new Array("FF0000","FFFF66","FF3399","00FFFF","FF9900","00FF00"); // the colors
var aColor; // the chosen colorfunction loadText()
{
// randomly choose color
aColor = colors[Math.floor(Math.random()*colors.length)]; aChar = someText.charAt(i);
if (i == 0)
aSentence = aChar;
else
aSentence += aChar; // 50 iterations max.
if (i < 50) i++;

// For IE
if (document.all)
{
textDiv.innerHTML= "<font color='#"+aColor+"' face='Tahoma' size='5'><i>"+aSentence+"</i></font>";
setTimeout("loadText()",100);
}

// For Netscape Navigator 4
else if (document.layers)
{
document.textDiv.document.write("<font color='#"+aColor+"' face='Tahoma' size='5'><i>"+aSentence+"</i></font>");
document.textDiv.document.close();
setTimeout("loadText()",100);
}

// For other
else if (document.getElementById)
{
document.getElementById("textDiv").innerHTML = "<font color='#"+aColor+"' face='Tahoma'size='5'><i>"+aSentence+"</i></font>";
setTimeout("loadText()",100);
}
}
</script>
</head><body bgcolor="#000000" text="#ffffff" onLoad="loadText()">
<div id="textDiv"></div>
</body>
</html>