animierter Schatteneffekt mit schwankendem Schatten

Question

Wie man kontinuierlich wechselnden Schatten von Text erzeugt, der auf Benutzerseite automatisch fluktuiert, wie CSS-Effekt, der animierter Text mit sich kontinuierlich ändernder Schattenbreite ist.

Ich weiß, wie man CSS-Schatten hinzufügt, aber wie man es fluktuieren lässt?

#shadow { 
 
    text-shadow: 4px 4px 4px #aaa; 
 
}

<div id=shadow>shadow effect how to fluctuate it</div>

Answer 1

nicht sicher, was Sie genau durch Fluktuation bedeutet hier, aber wenn Sie den Unschärferadius Ihres text-shadow ändern möchten, können Sie animation hier verwenden ...

Ich bin mit @keyframes und animieren die XY und Unschärfe von text-shadow. Wenn Sie möchten, können Sie eine bestimmte Achse oder den Blur-Radius nur animieren, indem Sie den Wert 8px in etwas anderes ändern.

#shadow { 
 
    text-shadow: 4px 4px 4px #aaa; 
 
    animation: animate-shadow 1s ease-in infinite; 
 
} 
 

 
@keyframes animate-shadow { 
 
    50% { 
 
    text-shadow: 8px 8px 8px #aaa; 
 
    } 
 
}

<div id=shadow>shadow effect how to fluctuate it</div>

Answer 2

Sie können eine JS Intervall erstellen.

var shadow = document.getElementById("shadow"); 
 

 
var i = 0, increment = 0.05; 
 

 
setInterval(function() { 
 
    shadow.style.textShadow = i + "px " + i + "px " + i + "px #AAA"; 
 
    i += increment; 
 
    if (i > 3) { 
 
    increment = -0.05; 
 
    } else if (i < 1) { 
 
    increment = 0.05; 
 
    } 
 
}), 0;

<div id="shadow"> 
 
    shadow effect how to fluctuate it 
 
</div>