使用CSS创建一个splatter形状

Question

假设有一个圆圈链接，当你将鼠标悬停时它应该会变成这样的动画（粉红色的形状）：

我想到了很多事情，但我不确定应该采用哪种方式。我想最好的方法可能是使用sprite background-image为每个drop使用一个元素，并使用jQuery或CSS转换来显示它们。但是，我不确定如何为它们制作动画。这将是自然的方式，网页设计师将如何处理这样的事情。您认为最好的方法是什么？

编辑（澄清）

虽然看起来像，但我并不是纯粹通过使用CSS来做到这一点。我只是想以最好的方式做到这一点。实际上，我希望这可以在尽可能多的浏览器上运行。

我问了这个问题，因为我想看看有经验的网络开发人员如何解决这个问题。我认为关于这个问题的一个有趣的事实是使用哪种方法来实现最佳结果，并在现代浏览器功能和旧浏览器之间实现合理的平衡。

编辑2：

有些人要求我提供一些我认为可以解决这个问题的方法。我试着尽可能简短：

1. 使用多个元素。每个用于一个drop并使用CSS为它们设置动画。类似的东西：

   HTML：

   <div class="splash">
       <div class="circle"></div>
       <div class="drop drop1"></div>
       <div class="drop drop2"></div>
       <div class="drop drop3"></div>
       <div class="drop drop4"></div>    
       <div class="drop drop5"></div>
       <div class="drop drop"></div>
       <div class="drop drop6"></div>
   </div>
   
   CSS:
   
   .drop{
       background: url('/img/sprites.png') 0 0 no-repeat;
       display: block;
       position: relative;
       width: 10px;
       height: 10px;
       position:absolute;
   }
   
   .drop1{
       right: 5px;
       top: 5px;
   }
   
   ....
   

2. Do this purely using JavaScript and canvas element.

3. 使用background-image（GDSeabra的回答）

   div.splash {
       background-image:url('circle.png');
   }
   
   div.splash:hover {
       background-image:url('splatter.gif');
   }
   

   4,5,6，......混合以上。例如，使用CSS创建圆圈，使用.gif或canvas进行投放。或者也许使用CSS创建圆形和水滴以及jQuery或CSS过渡来为它们设置动画。

我希望这符合您的标准，以保持这个问题的开放性。我不会在没有自己尝试的情况下免费使用某人的知识。我只想要一位开发者的第二意见。

Answer 1

好吧，您可以将背景颜色设置为飞溅形状的图像，并在悬停时将其更改为.gif图像：

div {
    background-image:url('circle.png');
}
div:hover {
    background-image:url('splatter.gif');
}

Answer 2

关于之后放置gif的建议，您应该能够下载该文件并让浏览器对其进行缓存，不是吗？与在页面正文中插入img标签一样，使用CSS隐藏它，然后重新使用它。

无论如何，我都是这样做的。