javascript - 使用 CSS 创建飞溅形状

Question

假设有一个圆圈链接，当您将鼠标悬停在上面时，它应该变成像这样的带有漂亮动画的东西(粉红色的形状):

我想到了很多事情，但我不确定该走哪条路。我认为也许最好的方法是为每个滴使用一个带有 Sprite background-image 的元素，并使用 jQuery 或 CSS 转换来显示它们。但是，我不确定如何为它们设置动画。这将是自然的方式，网页设计师将如何处理这样的事情。您认为最好的方法是什么？

编辑(澄清)

虽然看起来像，但我并不是要纯粹使用 CSS 来完成此操作。我只是说如何以最好的方式做到这一点。事实上，我希望它能在尽可能多的浏览器上运行。

我问这个问题是因为我想看看有经验的网络开发人员会如何解决这个问题。我认为关于这个问题的有趣事实是使用哪种方法可以在现代浏览器功能和旧版浏览器之间取得合理平衡的情况下获得最佳结果。

编辑2:

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

1. 使用多个元素。每滴一滴，并使用 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');
}