SVG+CSS3实现弹性跳动动画特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 SVG+CSS3实现弹性跳动动画特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>SVG+CSS3</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>

<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>
</body>
</html>

CSS代码(style.css):

h1{text-align:center;font-family:HelveticaNeue,Arial,Sans-serif;font-weight:700;}
.r{position:relative;top:16px;width:169.655px;height:175.172px;margin:0 auto;z-index:2;-webkit-animation:bounce .6s cubic-bezier(.68,.06,.68,.42) infinite alternate;animation:bounce .6s cubic-bezier(.68,.06,.68,.42) infinite alternate;}
@-webkit-keyframes bounce{0%,10%{top:16px;-webkit-transform:scaleX(1) scaleY(1.35);transform:scaleX(1) scaleY(1.35);}
100%{top:178px;-webkit-transform:scaleX(1.35) scaleY(1);transform:scaleX(1.35) scaleY(1);}
}
@keyframes bounce{0%,10%{top:16px;-webkit-transform:scaleX(1) scaleY(1.35);transform:scaleX(1) scaleY(1.35);}
100%{top:178px;-webkit-transform:scaleX(1.35) scaleY(1);transform:scaleX(1.35) scaleY(1);}
}
.shadow{position:relative;top:130px;margin:0 auto;border-radius:50%;width:110px;height:68px;background-color:#777;-webkit-animation:fade .6s cubic-bezier(.68,.06,.68,.42) infinite alternate;animation:fade .6s cubic-bezier(.68,.06,.68,.42) infinite alternate;}
@-webkit-keyframes fade{0%,40%{opacity:0;width:0px;height:0px;}
100%{opacity:0.4;width:160px;height:26px;-webkit-filter:blur(5px);filter:blur(5px);}
}
@keyframes fade{0%,40%{opacity:0;width:0px;height:0px;}
100%{opacity:0.4;width:160px;height:26px;-webkit-filter:blur(5px);filter:blur(5px);}
}

附件:下载该文件资源,减少时间成本(增值服务)