帶有浮動陰影的動畫陰影效果

如何創建連續變化的文本陰影，這種陰影在用戶端自動波動，就像CSS效果一樣，陰影寬度連續變化的動畫文本。帶有浮動陰影的動畫陰影效果

我知道如何添加CSS陰影，但如何使其波動？

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

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

來源

2017-07-02 Anurag Batra

你可以提供你後的效果樣本？你的描述很難說清楚。一個圖像或動畫gif將做，或鏈接到一些示例網站。 –

你是什麼意思*波動* –

我的意思是波動是不斷變化的陰影寬度一旦增加然後降低先生@先生 –

不知道你的意思波動正是在這裏，但如果你想改變你的text-shadow的模糊半徑，可以使用animation這裏...

我使用@keyframes和動畫XY和模糊您的text-shadow。如果您願意，只需將值8px更改爲其他值即可爲特定軸或模糊半徑製作動畫。

#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>

來源

2017-07-02 16:55:19

先生，我試圖做的只是這樣的 –

@AuuragBatra偉大:)你也可以改變'顏色'或類似的東西，只要繼續添加屬性到你的'@keyframes' –

您可以創建一個JS間隔。

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>

來源

2017-07-02 17:00:49

帶有浮動陰影的動畫陰影效果

回答

相關問題