CSS3 - 仅使用 jquery 缩放框阴影答案

【问题标题】：CSS3 - scale only the box-shadow with jqueryCSS3 - 仅使用 jquery 缩放框阴影
【发布时间】：2023-06-14 03:26:01
【问题描述】：

我发现了一个不错的悬停效果，我想将它用于我的项目，但以另一种方式，不是作为悬停效果。我喜欢“波浪”效果，希望有人能帮助我:) div 应该在特定延迟后触发该效果。

Number One

$(document).ready(function() { $('#box').delay(4000).addClass('scale'); });

.scale {
-webkit-animation: spin 0.9s ease-out 75ms;
-moz-animation: spin 0.9s ease-out 75ms;
animation: spin 0.9s ease-out 75ms;}

@-webkit-keyframes spin {
0% {
    opacity: 0.3;
}

40% {
    opacity: 0.5;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255,255,255,0.5);
    -webkit-transform: scale(0.9);
}

100% {
    box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255,255,255,0.5);
    -webkit-transform: scale(1.0);
    opacity: 1;
} 

#box {
background: red;
height: 100px;
width: 100px;
position: absolute;
left: 60px;
top: 60px;}

看起来与示例几乎相似，但我没有得到 box-shadow 的波浪效果。我如何让阴影从我的 div 散开？

总结：1.将盒子阴影散布到div之外；

谢谢。 :)

【问题讨论】：

哇，Example
仅供参考 'ready' 事件仅适用于文档对象：>
啊，对。我现在改了。

标签： jquery animation css spread

【解决方案1】：

我不确定这是否是您打算做的，但请尝试一下这段代码（在示例编号 1 中）：

$('#box').ready(function() {
            test();
        });

function test(){

    $('#box').toggle('scale');

    window.setTimeout(test,4000);
}

【讨论】：

感谢您的回答，但这不是我想要的。 :) here 我不想切换它并且盒子阴影不会出现。乙/
the example how i want it 不是悬停效果，而是函数在 4 秒后触发效果。
啊，我太笨了。我想我有解决办法。我现在就试试并发布新代码。
here - 不是最好的，但它的东西：D
也许你正在寻找 animation-iteration-count 或者在 safari 和 chrome 浏览器的情况下 -webkit-iteration-count 让我们指定动画的循环次数，我们可以将其设置为无限让它永远循环。 here你可以找到一个例子。

【解决方案2】：

延迟编码错误，这里有一个延迟：http://jsfiddle.net/PVSpE/4/
javascript必须更改为：

setTimeout(function(){
    $('#box').addClass('scale');
}, 3000);

【讨论】：