javascript - 在一定时间内自动减小图像尺寸

Question

我正在寻找脚本，但不确定要寻找什么。

我有一个网页，其 body 标签带有背景图片。

body {
background: url(eye.gif)repeat;
background-size:91px 91px;
}

我希望实现的是，当页面加载时，它会将背景图像显示为 991px，然后在设定的时间内缓慢减小 10px，直到原始大小为 91px。

我不确定是否有办法做到这一点，或者甚至是另一种方式，当页面加载时它会放大然后随着时间的推移自动缩小。

基本上，当页面加载时，您会看到该图像两次，然后随着时间的推移，您会看到越来越多。

谁能指出我正确的方向。

Answer 1

如果你使用 background-size 你的 using css3 所以你可以使用关键帧

不需要 javascript。

@-webkit-keyframes bganimation{
0%{background-size:991px 991px;}
100%{background-size:91px 91px;}
}

body{
background: url(eye.gif)repeat;
background-size:91px 91px;
-webkit-animation:bganimation 20s linear; // 20s = 20 seconds
}

要获得更多支持，您需要添加其他特定前缀(-moz、-ms..)