基于SVG+CSS3实现弹性跳动动画特效。这是一款可以作为Loading加载使用的CSS3动画效果。效果图如下：

在线预览    源码下载

实现的代码。

html代码：

<h1>SVG+CSS3实现弹性跳动动画特效</h1>

<article class="bouncing-r">
  <div class="r">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="169.655px" height="175.172px" viewBox="0 0 169.655 175.172" enable-background="new 0 0 169.655 175.172" xml:space="preserve">
      <g>
        <path fill="#50BEED" d="M139.358,126.138c-3.117-1.039-11.107,2.238-15.184-6.953l-4.395-12.066
		c-4.236-9.428-12.706-7.432-12.866-7.512c12.706-3.035,26.53-14.223,26.45-33.721c0-22.215-21.576-35.8-33.402-40.195
		c-12.146-4.555-29.327-3.836-38.117-0.08c-17.021,7.112-34.042,20.457-34.042,40.035c0,6.952,1.199,12.546,5.753,19.419
		c3.676,5.593,10.069,13.265,23.334,16.062l0.08-1.039c-0.719,11.268-2.238,23.014-2.797,30.525
		c-0.16,2.557-0.479,3.037-2.397,3.277c-1.278,0.158-6.712,0.559-8.63,0.719c-3.037,0.24-3.835,2.477-3.756,4.314
		c0.08,0.879,1.039,3.676,3.996,3.438c3.676-0.32,7.751-0.641,9.03-0.801c0,0,33.483-2.955,33.483-3.035
		c4.474-0.48,4.554-7.912-0.959-7.672c-1.039,0.08-3.516,1.438-5.994-0.24c-0.16-0.398-1.358-1.119-1.358-3.275
		c0,0,2.078-23.895,2.158-23.895c3.276-0.318,12.946,0.08,15.982,8.23c1.039,2.877,3.196,14.305,3.356,15.023
		c2.078,8.311,11.027,17.9,22.615,17.102C140.077,142.599,145.671,128.216,139.358,126.138z M104.837,67.724
		c0.239,17.261-10.629,27.329-24.213,27.329c0,0,1.199-12.865,1.199-12.785c0-0.08,6.313-3.517,6.313-3.517
		c1.918-1.519,1.758-3.596,1.357-4.555c-0.879-2.157-3.675-3.036-5.354-1.918c-2.477,1.438-6.553,3.756-6.553,3.756L57.769,87.781
		c-4.555,2.477-9.669,1.998-13.425-1.438c-1.838-1.678-3.836-4.235-3.836-9.51c0-15.502,18.619-35.8,40.675-35.479
		C99.802,41.673,104.677,58.214,104.837,67.724z" />
      </g>
    </svg>
  </div>
  <div class="shadow"></div>
</article>
    

via：http://www.w2bc.com/Article/44297

在线预览    源码下载