这是一款基于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文件请参考下载文件。