Question

我有以下html：

<div class="inhaler__animation__container">
                <div class="inhaler__image__wrapper">
                    <img src="img/inhaler.png" alt="Inhaler animation image" title="Inhaler animation image">
                    <div class="inhaler__image__dot__wrapper">
                        <img src="img/pdot.png" alt="purple dot - Inhaler animation image" title="purple dot - Inhaler animation image">
                        <img src="img/wdot.png" alt="white dot - Inhaler animation image" title="white dot - Inhaler animation image">
                        <img src="img/pdot.png" alt="purple dot - Inhaler animation image" title="purple dot - Inhaler animation image">
                        <img src="img/wdot.png" alt="white dot - Inhaler animation image" title="white dot - Inhaler animation image">
                        <img src="img/pdot.png" alt="purple dot - Inhaler animation image" title="purple dot - Inhaler animation image">
                        <img src="img/wdot.png" alt="white dot - Inhaler animation image" title="white dot - Inhaler animation image">
                        <img src="img/pdot.png" alt="purple dot - Inhaler animation image" title="purple dot - Inhaler animation image">
                        <img src="img/wdot.png" alt="white dot - Inhaler animation image" title="white dot - Inhaler animation image">
                        <img src="img/pdot.png" alt="purple dot - Inhaler animation image" title="purple dot - Inhaler animation image">
                        <img src="img/wdot.png" alt="white dot - Inhaler animation image" title="white dot - Inhaler animation image">
                        <img src="img/pdot.png" alt="purple dot - Inhaler animation image" title="purple dot - Inhaler animation image">
                        <img src="img/wdot.png" alt="white dot - Inhaler animation image" title="white dot - Inhaler animation image">
                    </div>
                </div>
                <button id="startanimation">Start animation</button>
                <button id="endanimation">Stop animation</button>
            </div>

我有一个主图像inhaler.png，其余图像包裹在.inhaler__image__dot__wrapper内，现在单击按钮时，我希望点在主图像的灰色区域内进行动画处理，并单击停止位置动画按钮，我希望圆点落在底部（具有移动的轨迹，而不仅仅是捕捉到底部），但是我相信使用图像会很难。

我如何将点限制在灰色区域内，我相信这是不可能的
当动画停止播放时，我如何使图像过渡到底部并彼此堆叠？

我创建了一个小型演示here。

当然是在开始的I.E.在动画开始之前和结束时动画结束后，应将点堆叠在底部，我该如何实现？

所以总结一下我的问题::-

如何限制灰色区域内的点？
如何使点堆叠在底部？

P.S。我愿意尝试svg解决方案，如果使用svg将解决将点限制在给定区域的问题。我什至创建了一个svg HERE ..不知道如何使svg中的点动画，也不确定如何将点限制为粉红色rect元素，欢迎提出建议。

有关视觉描绘的信息，请参见以下图像：

我希望这些点仅在灰色区域内进行动画处理。

点将是如下所示的粒子：

如何为特定元素内的图像设置动画并使它们堆叠在动画末端的底部

0 个答案: