jquery - 如何用jquery制作简单的水滴动画

标签 jquery animation

我想创建简单的水滴动画,如下图所示

water drop

最佳答案

找到了解决方案。这里是Fiddle

<div class="wrap">
<div class="drop-outer">
<svg class="drop" viewBox="0 0 40 40" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="20" cy="20" r="20"/>
</svg>
</div>
<div class="ripple ripple-1">
  <svg class="ripple-svg" viewBox="0 0 60 60" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="30" cy="30" r="24"/>
  </svg>
</div>
 <div class="ripple ripple-2">
  <svg class="ripple-svg" viewBox="0 0 60 60" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="30" cy="30" r="24"/>
</svg>
 </div>
 <div class="ripple ripple-3">
  <svg class="ripple-svg" viewBox="0 0 60 60" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="30" cy="30" r="24"/>
  </svg>
 </div>

关于jquery - 如何用jquery制作简单的水滴动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32906340/

相关文章:

javascript - 合并两个 Jquery 脚本

javascript - 想要将网站上的所有单词颜色设为蓝色并大写

javascript - Jquery Append 未按预期顺序工作

ios - 如何在SwiftUI中制作简单的上下 float 动画?

javascript - 定义自定义 css 属性并使用 animate() 更改任何值

jquery:嵌套标签和悬停()在 IE 中不起作用

javascript - CSS:替换淡出图像

objective-c - 基于 View 的NSTableView过滤+动画

android - 我想编写一个 ImageView 先缓慢旋转然后逐渐增加旋转速度的程序

java - Sprite 动画 Libgdx Java