当前位置：文江博客话题详情

如何为文本添加发光效果？

发布于 2024-11-29 13:40:17 字数 43 浏览 1 评论 0原文

我还没有真正找到任何好的简单的动画发光效果教程。如何为文本设置发光动画？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

娇妻 2024-12-06 13:40:17

如果您只想使用 CSS3，您甚至不必使用任何 jQuery/JavaScript。只需在 CSS 中执行此操作即可：

.confirm_selection {
    -webkit-transition: text-shadow 0.2s linear;
    -moz-transition: text-shadow 0.2s linear;
    -ms-transition: text-shadow 0.2s linear;
    -o-transition: text-shadow 0.2s linear;
    transition: text-shadow 0.2s linear;
}
.confirm_selection:hover {
    text-shadow: 0 0 10px red; /* replace with whatever color you want */
}

这是小提琴： http://jsfiddle.net/zenjJ/

如果您愿意要让元素独立运行（无需悬停），请执行以下操作：

CSS:

.confirm_selection {
    -webkit-transition: text-shadow 1s linear;
    -moz-transition: text-shadow 1s linear;
    -ms-transition: text-shadow 1s linear;
    -o-transition: text-shadow 1s linear;
    transition: text-shadow 1s linear;
}
.confirm_selection:hover,
.confirm_selection.glow {
    text-shadow: 0 0 10px red;
}

JavaScript：

var glow = $('.confirm_selection');
setInterval(function(){
    glow.toggleClass('glow');
}, 1000);

您可以调整 CSS/JavaScript 中的计时以获得您想要的确切效果。

最后，这是小提琴： http://jsfiddle.net/dH6LS/

2013 年 10 月更新：现在所有主流浏览器都支持 CSS 动画，您所需要的就是：

.confirm_selection {
    animation: glow .5s infinite alternate;
}

@keyframes glow {
    to {
        text-shadow: 0 0 10px red;
    }
}

.confirm_selection {
    font-family: sans-serif;
    font-size: 36px;
    font-weight: bold;
}

<span class="confirm_selection">
[ Confirm Selection ]
</span>

这是小提琴： http://jsfiddle.net/dH6LS/689/

不要忘记包含生产中所有不同的供应商前缀。

If you want to just use CSS3, you don't even have to use any jQuery/JavaScript. Just do this in your CSS:

.confirm_selection {
    -webkit-transition: text-shadow 0.2s linear;
    -moz-transition: text-shadow 0.2s linear;
    -ms-transition: text-shadow 0.2s linear;
    -o-transition: text-shadow 0.2s linear;
    transition: text-shadow 0.2s linear;
}
.confirm_selection:hover {
    text-shadow: 0 0 10px red; /* replace with whatever color you want */
}

Here's the fiddle: http://jsfiddle.net/zenjJ/

If you want the element to run on its own (without hovering), do this:

CSS:

.confirm_selection {
    -webkit-transition: text-shadow 1s linear;
    -moz-transition: text-shadow 1s linear;
    -ms-transition: text-shadow 1s linear;
    -o-transition: text-shadow 1s linear;
    transition: text-shadow 1s linear;
}
.confirm_selection:hover,
.confirm_selection.glow {
    text-shadow: 0 0 10px red;
}

JavaScript:

var glow = $('.confirm_selection');
setInterval(function(){
    glow.toggleClass('glow');
}, 1000);

You can play around with the timing in the CSS/JavaScript to get the exact effect you're looking for.

And finally, here's the fiddle: http://jsfiddle.net/dH6LS/

Update Oct. 2013: being that all major browsers now support CSS animations, all you need is this:

.confirm_selection {
    animation: glow .5s infinite alternate;
}

@keyframes glow {
    to {
        text-shadow: 0 0 10px red;
    }
}

.confirm_selection {
    font-family: sans-serif;
    font-size: 36px;
    font-weight: bold;
}

<span class="confirm_selection">
[ Confirm Selection ]
</span>

Here's the fiddle: http://jsfiddle.net/dH6LS/689/

Don't forget to include all the different vendor prefixes in production.

回复收藏 0 原文

终陌 2024-12-06 13:40:17

您可以使用 .animate 循环到所选颜色以创建“突出显示” ”效果大概就是“发光”的意思。

$(".confirm_selection").hover(function() {
    $(this).animate({
        color: "red"
    }, 2000);
}, function() {
    $(this).animate({
        color: "black"
    }, 2000);
});

您可以在这里尝试。

注意：彩色动画需要使用彩色动画插件或 jQuery UI（我假设您已经在使用它，因为它已包含在您的小提琴中）。

You can use .animate to cycle to a chosen colour to create a "highlight" effect which is presumably what "glowing" means.

$(".confirm_selection").hover(function() {
    $(this).animate({
        color: "red"
    }, 2000);
}, function() {
    $(this).animate({
        color: "black"
    }, 2000);
});

You can try it here.

NOTE: Colour animation requires the use of either the colour animation plugin, or jQuery UI (which I assume you are already using as it has been included in your fiddle).

回复收藏 0 原文

抱猫软卧 2024-12-06 13:40:17

您可以使用纯CSS3过渡来做到这一点：

div.transition{
    text-decoration: none;  
    color: blue;  
    text-shadow: none;  
    -webkit-transition: 500ms linear 0s;  
    -moz-transition: 500ms linear 0s;  
    -o-transition: 500ms linear 0s;  
    transition: 500ms linear 0s;  
    outline: 0 none; 
    background-color:#000; 
    font-size:2em;
    width:300px;     
    height:100px; 
    padding:1em;
}

div.transition:hover {
    color: #fff;  
    text-shadow: -1px 1px 8px #ffc, 1px -1px 8px #fff; 
}

示例： http://jsfiddle.net/jasongennaro/z5jCB/1 /

注意：发光文本在深色背景上效果最佳。

灵感（以及大部分代码）来自这里：http://www.sitepoint.com/css3-glowing-link-effect/

You can do this with pure CSS3 transitions:

div.transition{
    text-decoration: none;  
    color: blue;  
    text-shadow: none;  
    -webkit-transition: 500ms linear 0s;  
    -moz-transition: 500ms linear 0s;  
    -o-transition: 500ms linear 0s;  
    transition: 500ms linear 0s;  
    outline: 0 none; 
    background-color:#000; 
    font-size:2em;
    width:300px;     
    height:100px; 
    padding:1em;
}

div.transition:hover {
    color: #fff;  
    text-shadow: -1px 1px 8px #ffc, 1px -1px 8px #fff; 
}

Example: http://jsfiddle.net/jasongennaro/z5jCB/1/

Note: Glowing text works best on a dark background.

Inspiration (and much of the code) from here: http://www.sitepoint.com/css3-glowing-link-effect/

回复收藏 0 原文

海夕 2024-12-06 13:40:17

试试这个代码：

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function ()
{
    var glow = $('h1');
    setInterval(function()
    {
        glow.toggleClass('glow');
    }, 1000);
});
</script>
<style type="text/css">
    h1 {
        -webkit-transition: text-shadow 1s linear;
        -moz-transition: text-shadow 1s linear;
        -ms-transition: text-shadow 1s linear;
        -o-transition: text-shadow 1s linear;
        transition: text-shadow 1s linear;
        width: 725px;
    }
    h1:hover,
    h1.glow
    {
        text-shadow: 0 0 10px Green;
    }
</style>
</head>

<body>
    <h1>This text has Glow Animation Effect</h1>
    <div class="buttons">
        <input type="text" name="txt"> <input type="button" class="btnAdd" value="Add"><br>
    </div>
    <h3>J Query</h3>
</body>

</html>

Try this code:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function ()
{
    var glow = $('h1');
    setInterval(function()
    {
        glow.toggleClass('glow');
    }, 1000);
});
</script>
<style type="text/css">
    h1 {
        -webkit-transition: text-shadow 1s linear;
        -moz-transition: text-shadow 1s linear;
        -ms-transition: text-shadow 1s linear;
        -o-transition: text-shadow 1s linear;
        transition: text-shadow 1s linear;
        width: 725px;
    }
    h1:hover,
    h1.glow
    {
        text-shadow: 0 0 10px Green;
    }
</style>
</head>

<body>
    <h1>This text has Glow Animation Effect</h1>
    <div class="buttons">
        <input type="text" name="txt"> <input type="button" class="btnAdd" value="Add"><br>
    </div>
    <h3>J Query</h3>
</body>

</html>

回复收藏 0 原文

清音悠歌 2024-12-06 13:40:17

下面是一个纯 CSS 动画示例：

@keyframes shadow {
  0% {
    text-shadow: 5px 5px 10px gray;
  }
  25% {
    text-shadow: -5px 5px 10px gray;
  }
  50% {
    text-shadow: -5px -5px 10px gray;
  }
  75% {
    text-shadow: 5px -5px 10px gray;
  }
}

h1 {
  text-shadow: 5px 5px 10px gray;
  animation: shadow 2s infinite ease;
}

https://codepen.io/juanbrujo/pen/abyoXNY

Here's an animated pure CSS example:

@keyframes shadow {
  0% {
    text-shadow: 5px 5px 10px gray;
  }
  25% {
    text-shadow: -5px 5px 10px gray;
  }
  50% {
    text-shadow: -5px -5px 10px gray;
  }
  75% {
    text-shadow: 5px -5px 10px gray;
  }
}

h1 {
  text-shadow: 5px 5px 10px gray;
  animation: shadow 2s infinite ease;
}

https://codepen.io/juanbrujo/pen/abyoXNY

回复收藏 0 原文

猥︴琐丶欲为 2024-12-06 13:40:17

我在网上找到了这个在线，并且只花了几分钟就完成了设置：

// Neon glowing Text: https://www.w3schools.com/howto/howto_css_glowing_text.asp
.glow {
  // font-size: 80px; // Way TOO BIG
  color: #fff;
  text-align: center;
  -webkit-animation: glow 1s ease-in-out infinite alternate;
  -moz-animation: glow 1s ease-in-out infinite alternate;
  animation: glow 1s ease-in-out infinite alternate;
}

@-webkit-keyframes glow {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
  }
  to {
    text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
  }
}

我不喜欢这些颜色，会将它们更改为火色（如果我能找出代码）：

I found this on-line and it only took a couple of minutes to setup:

// Neon glowing Text: https://www.w3schools.com/howto/howto_css_glowing_text.asp
.glow {
  // font-size: 80px; // Way TOO BIG
  color: #fff;
  text-align: center;
  -webkit-animation: glow 1s ease-in-out infinite alternate;
  -moz-animation: glow 1s ease-in-out infinite alternate;
  animation: glow 1s ease-in-out infinite alternate;
}

@-webkit-keyframes glow {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
  }
  to {
    text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
  }
}

I don't like the colors and will change them to a fire color (if I can figure out the codes):

回复收藏 0 原文

我不在是我 2024-12-06 13:40:17

这是一个动画效果，我过去发现它通过向 jQuery fx 对象添加新的步骤函数而很有用。

$.fx.step.myBlurRedEffect = function (fx) {
    $(fx.elem).css({
        textShadow: '0 0 ' + Math.floor(fx.now) + 'px #FF0000'
    });
}

以通常的方式调用（比如半秒模糊 6px）：

$('#myID').animate({
    myBlurRedEffect: 6
},{
    duration: 500
});

http://jsfiddle.net/whLMZ /1/

这应该可以帮助您开始，并且您应该找到许多有趣的方法来扩展它，添加其他 CSS 参数等...:)

Here is an animation effect that I have found useful in the past by adding a new step function to the jQuery fx object.

$.fx.step.myBlurRedEffect = function (fx) {
    $(fx.elem).css({
        textShadow: '0 0 ' + Math.floor(fx.now) + 'px #FF0000'
    });
}

Which is called in the usual way (say blur 6px in half a second):

$('#myID').animate({
    myBlurRedEffect: 6
},{
    duration: 500
});

http://jsfiddle.net/whLMZ/1/

This should get you started, and you should find many fun ways to extend upon this, add other CSS parameters etc... :)

回复收藏 0 原文

泪之魂 2024-12-06 13:40:17

没有人提到 css3 关键帧可以使发光效果动画化，从而摆脱 javascript（这来自 javascript 开发人员）。

    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
        :root { --color: blue; }
        span.vjs { --color: #F3E5AB; }
        span.cv { --color: skyblue; }
        body {background:gray;}
        .vjs, .cv, h1 {
          text-align: center;
          font-size: 30pt;
          font-weight: 100;
          font-family: cursive2;
        }
        .vjs {
          text-shadow: 0 0 2px #333333, 0 0 4px #333333;
          color: var(--color);
        }
        .cv {
          text-shadow: 0 0 2px #fff, 0 0 4px #fff;
          color: #2965f1;
        }
        h1 {
          text-shadow: 0 0 2px #fff, 0 0 4px #fff;
          color:black;
        }
        .cv:hover, .vjs:hover, h1:hover {
            animation: glow 1s linear infinite;
            color: var(--color);
        }
        @keyframes glow {
            0% {text-shadow: 0 0 0px var(--color);}
            50% {text-shadow: 0 0 10px var(--color);}
            100% {text-shadow: 0 0 0px var(--color);}
        }
    </style>
    <script src="vanilla-js.com/lib/vanilla.4.1.min.js"></script>
    </head>

    <body>
    <h1>This text has Real Glow Animation Effect with 
<span class="vjs">Vanilla JS</span>And <span class="cv">CSS Variables</span>. Hover over all the texts!</h1>
    </body>

    </html>

jsfiddle

No one mention css3 keyframes which can animate the glow effect getting rid of javascript(this coming from a javascript dev).

    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
        :root { --color: blue; }
        span.vjs { --color: #F3E5AB; }
        span.cv { --color: skyblue; }
        body {background:gray;}
        .vjs, .cv, h1 {
          text-align: center;
          font-size: 30pt;
          font-weight: 100;
          font-family: cursive2;
        }
        .vjs {
          text-shadow: 0 0 2px #333333, 0 0 4px #333333;
          color: var(--color);
        }
        .cv {
          text-shadow: 0 0 2px #fff, 0 0 4px #fff;
          color: #2965f1;
        }
        h1 {
          text-shadow: 0 0 2px #fff, 0 0 4px #fff;
          color:black;
        }
        .cv:hover, .vjs:hover, h1:hover {
            animation: glow 1s linear infinite;
            color: var(--color);
        }
        @keyframes glow {
            0% {text-shadow: 0 0 0px var(--color);}
            50% {text-shadow: 0 0 10px var(--color);}
            100% {text-shadow: 0 0 0px var(--color);}
        }
    </style>
    <script src="vanilla-js.com/lib/vanilla.4.1.min.js"></script>
    </head>

    <body>
    <h1>This text has Real Glow Animation Effect with 
<span class="vjs">Vanilla JS</span>And <span class="cv">CSS Variables</span>. Hover over all the texts!</h1>
    </body>

    </html>

A jsfiddle

回复收藏 0 原文

~没有更多了~