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>
  </defs>
  <use class='speaker speaker--left' href="#speaker"/>
  <use class='speaker speaker--right' href="#speaker" transform='translate(-500, 0)'/>
  <g class='stack'>
    <rect x="353" y="516" width="30" height="5" class='button'/>
    <rect x="353" y="516" width="10" height="5" class='shimmer'/>
    <rect x="510" y="516" width="30" height="5" class='button'/>
    <rect x="510" y="516" width="10" height="5" class='shimmer'/>
    <rect class='hifi__body' x="322" y="416" width="250" height="100" rx="5" />
    <path class='hifi__shimmer' d="M322 421C322 418.239 324.239 416 327 416H362V516H327C324.239 516 322 513.761 322 511V421Z"/>
    <g class='slider'>
      <path d="M344 436V496" class='stroked' stroke-width="2" stroke-linecap="round"/>
      <rect class='slider__handle button' x="337" y="444" width="14" height="5" rx="2" />
    </g>
    <g class='lcd' clip-path="url(#lcdFrame)">
      <path class='lcd__panel stroked' d="M394 430H500C500.552 430 501 430.448 501 431V457C501 457.552 500.552 458 500 458H394C393.448 458 393 457.552 393 457V431C393 430.448 393.448 430 394 430Z"  stroke-width="2"/>
      <path class='lcd__line stroked' d="M411 438H447" stroke-width="6"/>
      <path class='lcd__text' d="M.........完整代码请登录后点击上方下载按钮下载查看