Question

我正在努力使一颗不断扩展的中心像THIS一样。

<div id="heart"></div>

如何使这种脉冲和扩展像gif一样？

Answer 1

可以使用css3

完成此操作

很久以前我见过这种animation。所以想分享

以下是fiddle

Answer 2

好的，所以你最好不要使用图像而不是css形状。由于形状的边界不流畅，因此您将很难扩展和缩小形状以产生脉动效果。如果你使用图像，你需要做的就是设置容器div的大小动画，你就可以了。

这样做一次很容易，但是因为我假设你想让它不断跳动，我们需要在循环中进行动画制作。使用jQuery，这样的东西会很好用：

<强>的jQuery

function animatethis(targetElement, speed) {
    $(targetElement).animate({ width: "+=100px"},
    {
        duration: speed,
        complete: function ()
        {
            targetElement.animate({ width: "-=100px" },
            {
                duration: speed,
                complete: function ()
                {
                    animatethis(targetElement, speed);
                }
            });
        }
    });
};

animatethis($('#heart'), 2000);

<强> HTML

<div>
    <img src="..." id="heart" />
</div>

<强> CSS

#heart {
    position: relative;
    width: 150px;
}

这是一个小提琴：http://jsfiddle.net/xffLZ/2/

要更改大小，您需要调整jQuery中的两个width值，并为了更改脉动的速度，更改animatethis($('#heart'), 2000);中的数值

<强>更新

好的，所以我有一个更新的答案...我已经使用jQuery和jQueryUI编写了一个脚本，它会像你提供的gif示例那样产生一些心脏图像。这是我到目前为止所提供的更新的小提琴：http://jsfiddle.net/t9mZZ/3/

请注意，这使用了jQuery和jQueryUI，所以你将包含两个库，说实话，gif可能是一个更轻松的方式。但是，如果你在没有gif的情况下坚持下去，那么这应该可行。

<强> HTML

<div id="container">
    <img id="heart1" src="..." />
    <img id="heart2" src="..." />
<div>

<强> CSS

#container {
    width: 100px;
    height: 100px;
    position: relative;
    overflow: hidden;
}
img{
    width:250px;
    display:none;
    position: absolute;
    left: -75px;
    top: -50px;
}

<强>的jQuery

function animatethis(target1, target2) {
    $(target1).show('scale', function () {
        $(target1).css('z-index','0');
        $(target2).css('z-index','1');
        $(target2).show('scale', function () {
            $(target1).css('z-index','1');
            $(target2).css('z-index','0');
            animatethis(target1, target2);
        });
    });
            };

animatethis($('#heart1'), $('#heart2'));

需要帮助扩大形状

2 个答案: