如何使用 jQuery 和 CSS 动画制作 Box-Shadow 动画？

如何使用 jQuery 对 Box-Shadow 进行动画处理

要使用 jQuery 对 box-shadow 属性进行动画处理，您可以使用 jQuery 插件提供的 .animate() 方法来实现阴影动画，该方法扩展了 .animate 方法。

直接回答

正确的语法如下：

$(element).animate({ 
    boxShadow: "0px 0px 5px 3px hsla(100, 70%, 60%, 0.8)"
}) 

此代码将为框阴影的每个方面设置动画：颜色、x 和 y 偏移、模糊-radius 和 spread-radius。

改用 CSS 动画

您可以选择使用 CSS 动画而不是直接使用 jQuery 处理动画。这有助于防止出现意外情况，并将样式信息保留在样式表中。

以下是您可以在样式表中定义的 CSS 动画示例：

<code class="css">@keyframes shadowPulse {
    0% {
        box-shadow: 0px 0px 10px 0px hsla(0, 0%, 0%, 1);
    }

    100% {
        box-shadow: 0px 0px 5px 0px hsla(0, 0%, 0%, 0);
    }
}
    
.shadow-pulse {
    animation-name: shadowPulse;
    animation-duration: 1.5s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
}</code>

然后您可以使用animationend 事件将动画的结束与 JS 代码同步。

Vanilla JS:

<code class="js">element.classList.add('shadow-pulse')
element.addEventListener('animationend', event => {  
    element.classList.remove('shadow-pulse')
    // do something else...
})</code>

jQuery:

<code class="js">$(element).addClass('shadow-pulse')
$(element).on('animationend', function(){    
    $(element).removeClass('shadow-pulse')
    // do something else...
})</code>

以上是如何使用 jQuery 和 CSS 动画制作 Box-Shadow 动画？的详细内容。更多信息请关注PHP中文网其他相关文章！