带有浮动阴影的动画阴影效果

如何创建连续变化的文本阴影，这种阴影在用户端自动波动，就像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

带有浮动阴影的动画阴影效果

回答

相关问题