gsap+svg音箱跳动动画效果-html代码-BFW代码库

gsap+svg音箱跳动动画效果

代码语言：html

所属分类：动画

代码描述：gsap+svg音箱跳动动画效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">


  
  
<style>
:root {
  --body: #333;
  --body-shimmer: rgba(255, 255, 255, 0.1);
  --stroke: #262626;
  --button: #999;
}
* {
  box-sizing: border-box;
}
body {
  --saturation: 50;
  --hue: 180;
  background: hsl(var(--hue), calc(var(--saturation, 40) * 1%), 80%);
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  min-height: 100vh;
}

.note path {
  stroke: hsl(var(--hue, 0), 60%, 60%);
}
.note circle {
  fill: hsl(var(--hue, 0), 60%, 60%);
}

.dot {
  fill: #7a1f1f;
}
.hifi {
  height: 50vmin;
  border-bottom: 4px solid
    hsl(var(--hue), calc(var(--saturation, 40) * 1%), 50%);
}
.hifi__body {
  fill: var(--body);
}
.hifi__shimmer {
  fill: var(--body-shimmer);
}
.shimmer {
  fill: var(--body-shimmer);
}
.stroked {
  stroke: var(--stroke);
}
.button {
  fill: var(--button);
}
.lcd__panel {
  fill: #a79e4d;
}
.tweeter__outer {
  fill: #313131;
  stroke: var(--button);
}
.tweeter__inner {
  fill: var(--body-shimmer);
}
</style>



</head>

<body translate="no" >
  <svg class='hifi' viewBox="0 0 880 521" fill="none" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <clipPath id="lcdFrame">
      <rect width="110" height="30" transform="translate(392 429)"/>
    </clipPath>
    <g id='speaker' filter='url(#blur)' class='hifi__speaker'>
      <rect class='hifi__body' x="622" y="241" width="150" height="280" rx="5" />
      <path class='hifi__shimmer' d="M622 246C622 243.239 624.239 241 627 241H662V521H627C624.239 521 622 518.761 622 516V246Z"/>
      <g class='tweeter'>
        <circle class='tweeter__outer' cx="697" cy="440" r="52.5" stroke-width="5"/>
        <circle class='tweeter__inner' cx="697" cy="440" r="30" />
      </g>
      <g class='tweeter'>
        <circle class='tweeter__outer' cx="697" cy="331" r="37.5" stroke-width="5"/>
        <circle class='tweeter__inner' cx="697" cy="331" r="21.8182"/>
      </g>
    </g>
    <filter id="blur">
      <feGaussianBlur in="SourceGraphic" stdDeviation="0" />
    </filter&.........完整代码请登录后点击上方下载按钮下载查看