mgtv - 素材

当前位置:Gxlcms > 播放器 > html5 svg手机播放器按钮动画特效

html5 svg手机播放器按钮动画特效

时间:2021-07-01 10:21:17 帮助过:0人阅读

html5 svg手机播放器按钮动画特效 html5 svg手机播放器按钮动画特效是一款适用于手机端的音乐播放器播放暂停音量调节按钮特效。
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>html5 svg手机播放器按钮动画特效 - mgtv素材</title>

<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/default.css">

<link rel="stylesheet" type="text/css" href="css/styles.css">

</head>
<body>

<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 class="menu__credits"></div>
  </div>
</div>

<script type="text/javascript" src='js/jquery-2.1.0.min.js'></script>
<script type="text/javascript" src='js/hammer.js'></script>
<script type="text/javascript" src='js/TweenMax.min.js'></script>
<script type="text/javascript" src="js/main.js"></script>


</body>