Question

我的目标是使用CSS animation对某些文本进行随机闪耀效果。我已经有了一个有效的代码，只想知道是否有更有效/简单的解决方案。

HTML：

<span class="foo">
    <span class="bar">
    </span>
</span>

CSS：

@keyframes masked-animation {
    0% {background-position: -1000px 0}
    50% {background-position: 1000px 0}
    100% {background-position: 1000px 0}
}

.foo{
    text-align: center;
    font-size: 40px;
    font-weight: bold;
    display: block;
    color: red;
    position: absolute;
}

.bar{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    color: rgba(0,0,0,0);
    background-image: linear-gradient(-45deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.67) 48%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.67) 52%, rgba(255,255,255,0) 100%);
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    animation-name: masked-animation;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    background-size: 400% 100%;
 }

JS：

$('.foo')[0].childNodes[0].nodeValue = "Text";
$('.foo > .bar').css({
    "animation-duration" : 8 + Math.round(Math.random()*40)/10 + "s",
    "animation-delay" : Math.round(Math.random()*100)/10 + "s"
}).text("Text");

为了使动画看起来正确，它需要在元素/文本之上。将它放在同一个元素上会使它落后。我尝试使用::before，但我不能用JS选择它，因为它实际上并不存在于DOM中。

这需要应用于多个元素，而<span>内的文字经常会发生变化。

JSFiddle

Answer 1

另一种方法是在javascript中创建并直接操作样式表。通过这种方式，迭代元素由浏览器处理，而不是在javascript中处理。

在MDN的CSSStyleSheet.insertRule()示例中描述了设置这样的样式表。

这些操作还有jQuery library。

和working example：

var styleElement = document.createElement('style');
document.head.appendChild(styleElement);

var styleSheet = styleElement.sheet,
    ruleIdx = styleSheet.insertRule('.target{}',styleSheet.cssRules.length),
    rule = styleSheet.cssRules[ruleIdx],
    colorize = function() {
        var color = Math.random() * 360;
        rule.style.color = 'hsl('+color+',100%,50%)';
    },
    interval = setInterval(colorize,1000);
colorize();

<div class="target" style="font-size:5em;font-weight:bold;font-family:sans-serif">TEST</div>

操纵DOM子项的有效方法

1 个答案: