Question

我有一些文字，并且应用了一些文字阴影。我希望它的行为类似于＆＃34;开/关＆＃34;。

的CSS：

a.playnowanchor.glow {
  text-shadow: 1px 0px 20px #fff;
}

HTML：

<a href="#" class="playnowanchor">PLAY NOW</a>

我用jquery实现了效果：

setInterval(function() {
        $('a.playnowanchor').toggleClass('glow');
    }, 400);

它基本上工作正常，但我希望过渡也会发生。

这可以用css以某种方式完成，因为我不知道用jquery做这个的方法吗？

Answer 1

您可以使用CSS动画来实现此目的。

重复包括动画中的无限，例如：

＆＃13;

body {background:salmon} /* for testing purpose */

a.playnowanchor {
    -webkit-animation: animate .6s infinite;
    -moz-animation: animate .6s infinite;
    animation: animate .6s infinite;
} 

/* Keyframes */
@-webkit-keyframes animate{
    0% {text-shadow: none;}
    50% {text-shadow: 1px 0px 20px #fff;}
    100% {text-shadow: none;}
}
@-moz-keyframes animate{
    0% {text-shadow: none;}
    50% {text-shadow: 1px 0px 20px #fff;}
    100% {text-shadow: none;}
}
@keyframes animate{
    0% {text-shadow: none;}
    50% {text-shadow: 1px 0px 20px #fff;}
    100% {text-shadow: none;}
}

＆＃13;

<a href="#" class="playnowanchor">PLAY NOW</a>

＆＃13;

Answer 2

你可以试试这个。

仅使用css过渡来制作它。

希望能帮到你。

修改

如果您想自动为其设置动画，可以尝试keyframe。

.hi { -webkit-animation: text-animate 5s infinite; animation: text-animate 5s infinite; } @-webkit-keyframes text-animate { 0% {text-shadow: 10px 10px 5px #888888;} 100% {text-shadow:0} } @keyframes text-animate { 0% {text-shadow: 10px 10px 5px #888888;} 100% {text-shadow: 0} }

jsfiddle

文字阴影褪色

2 个答案: