Question

我真的没有找到任何好的简单教程动画效果。如何在文本上制作动画效果？

Answer 1

如果你想只使用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/

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

Answer 2

您可以使用.animate循环到所选颜色以创建“高亮”效果，这可能是“发光”的含义。

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

You can try it here.

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

Answer 3

您可以使用纯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/

Answer 4

试试这段代码：

<!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>

Answer 5

这是一个动画效果，我在过去通过向 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参数等...：）

Answer 6

没有人提到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>

A jsfiddle

Answer 7

它真正添加动画，在0,50和100％停止3次请参阅followign博客中的帖子 http://anujverma000.blogspot.in/2013/04/glowing-effect-in-css3.html

如何在文本上设置发光效果的动画？

7 个答案: