浙江 杭州

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

系统分类: 网页特效 - jquery插件 - jQuery多媒体插件 2016-11-30

人气6408

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


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

查看演示
下载资源:0
下载资源
错误提交:

格式:zip 大小:105.09KB

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-2073.html 非特殊说明,本文版权归原作者所有,转载请注明出处
2个HTML5 SVG超炫播放器按钮动画特效

我当前G币余额:0 已下载次数:0

注:点击右侧分享按钮并且留下评论自动+10G币

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

评论功能关闭...(已有1 评论)