css – 如何为文字动画效果?

前端之家收集整理的这篇文章主要介绍了css – 如何为文字动画效果?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我真的没有找到任何好的简单教程来动画发光效果。如何在文字上发光?

解决方法

如果您只想使用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;
    }
}

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

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

原文链接:https://www.f2er.com/css/218538.html

猜你在找的CSS相关文章