html字体进入动画效果,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 */

}

编辑：

如果你想让元素自己运行(没有悬停)，请执行以下操作：

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中使用时间来获得正确的效果。

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

.confirm_selection {

animation: glow .5s infinite alternate;

}

@keyframes glow {

to {

text-shadow: 0 0 10px red;

}

}

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