2个HTML5 SVG超炫播放器按钮动画特效

这是一款基于HTML5 SVG使用GASP/TweenMax制作的超炫播放器按钮动画特效。这两个播放器按钮动画特效中的按钮使用SVG制作，动画则由TweenMax来完成。效果非常的炫酷。

制作方法

HTML结构

这个播放器按钮动画的基本HTML结构如下。

<div class="view__menu">
  <div class="menu__inner">
    <div class="btn btn--play-pause">
      <svg viewbox="0 0 40 40" class="btn__icon">
        <circle cx="20" cy="20" r="19" transform="rotate(-90 20 20)" class="icon__shape icon__shape--circle icon__shape--orange"></circle>
        <circle cx="20" cy="20" r="19" transform="rotate(-90 20 20)" class="icon__shape icon__shape--circle icon__shape--white"></circle>
        <polygon points="16,14 16,26 27.5,19.8" class="icon__shape icon__shape--triangle"></polygon>
        <line x1="24" y1="14" x2="24" y2="26" class="icon__shape icon__shape--line"></line>
      </svg>
      <div class="btn__shadow"></div>
    </div>
    <div class="btn btn--volume btn--volume-2">
      <svg viewbox="0 0 174 40" class="btn__icon">
        <path d="M2.8,20.4c0-17.4,19-19,19-19v38C21.8,39.4,2.8,37.8,2.8,20.4z" class="icon__shape"></path>
        <line x1="26" y1="7.9" x2="1" y2="32.9" class="icon__shape icon__shape--line-mute icon__shape--orange"></line>
        <line x1="26" y1="7.9" x2="1" y2="32.9" class="icon__shape icon__shape--line-mute icon__shape--white"></line>
        <line x1="37.8" y1="20" x2="162.8" y2="20" class="icon__shape icon__shape--line-controls icon__shape--translucide"></line>
        <line x1="37.8" y1="20" x2="162.8" y2="20" class="icon__shape icon__shape--line-controls icon__shape--white"></line>
        <circle cx="24.8" cy="20" r="19" transform="rotate(45 25 20)" class="icon__shape icon__shape--circle-big icon__shape--translucide"></circle>
        <circle cx="24.8" cy="20" r="13" transform="rotate(-45 25 20)" class="icon__shape icon__shape--circle-medium icon__shape--translucide"></circle>
        <circle cx="24.8" cy="20" r="7" transform="rotate(-45 25 20)" class="icon__shape icon__shape--circle-small icon__shape--translucide"></circle>
        <circle cx="37.8" cy="20" r="0" class="icon__shape icon__shape--circle-controls"></circle>
        <circle cx="37.8" cy="20" r="1" class="icon__shape icon__shape--circle-placeholder"></circle>
      </svg>
      <div class="btn__shadow"></div>
    </div>
  </div>
</div>         
              

CSS样式和JS文件请参考下载文件。