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="M407.664 446.24C407.925 446.24 408.163 446.28 408.376 446.36C408.589 446.44 408.771 446.555 408.92 446.704C409.075 446.853 409.192 447.032 409.272 447.24C409.357 447.443 409.4 447.669 409.4 447.92C409.4 448.171 409.357 448.4 409.272 448.608C409.187 448.811 409.067 448.987 408.912 449.136C408.763 449.285 408.581 449.4 408.368 449.48C408.155 449.56 407.92 449.6 407.664 449.6H406.44V452H405.72V446.24H407.664ZM406.44 448.96H407.664C407.963 448.96 408.203 448.867 408.384 448.68C408.565 448.488 408.656 448.235 408.656 447.92C408.656 447.605 408.565 447.355 408.384 447.168C408.203 446.976 407.963 446.88 407.664 446.88H406.44V448.96ZM410.277 450.72C410.277 450.512 410.312 450.325 410.381 450.16C410.456 449.989 410.56 449.845 410.693 449.728C410.832 449.611 410.997 449.52 411.189 449.456C411.381 449.392 411.597 449.36 411.837 449.36H413.157V449C413.157 448.728 413.066 448.517 412.885 448.368C412.709 448.213 412.453 448.136 412.117 448.136C411.872 448.136 411.661 448.181 411.485 448.272C411.309 448.363 411.192 448.488 411.133 448.648H410.413C410.488 448.301 410.68 448.027 410.989 447.824C411.298 447.621 411.68 447.52 412.133 447.52C412.677 447.52 413.104 447.648 413.413 447.904C413.722 448.155 413.877 448.507 413.877 448.96V452H413.221V451.16H413.157C413.088 451.443 412.922 451.667 412.661 451.832C412.405 451.997 412.093 452.08 411.725 452.08C411.282 452.08 410.93 451.957 410.669 451.712C410.408 451.467 410.277 451.136 410.277 450.72ZM410.997 450.704C410.997 450.949 411.074 451.141 411.229 451.28C411.384 451.419 411.602 451.488 411.885 451.488C412.066 451.488 412.234 451.464 412.389 451.416C412.544 451.368 412.677 451.301 412.789 451.216C412.906 451.125 412.997 451.021 413.061 450.904C413.125 450.787 413.157 450.659 413.157 450.52V449.92H411.853C411.586 449.92 411.376 449.989 411.221 450.128C411.072 450.267 410.997 450.459 410.997 450.704ZM416.17 447.6V448.36H416.25C416.319 448.099 416.463 447.893 416.682 447.744C416.9 447.595 417.164 447.52 417.474 447.52C417.938 447.52 418.3 447.667 418.562 447.96C418.828 448.248 418.962 448.645 418.962 449.152V449.4H418.242V449.24C418.242 448.893 418.154 448.627 417.978 448.44C417.807 448.248 417.562 448.152 417.242 448.152C416.927 448.152 416.676 448.251 416.49 448.448C416.303 448.64 416.21 448.904 416.21 449.24V452H415.49V447.6H416.17ZM419.871 447.6H421.151V446.24H421.871V447.6H423.591V448.256H421.871V450.864C421.871 451.013 421.916 451.131 422.007 451.216C422.103 451.301 422.231 451.344 422.391 451.344H423.511V452H422.391C422.012 452 421.711 451.896 421.487 451.688C421.263 451.48 421.151 451.205 421.151 450.864V448.256H419.871V447.6ZM424.564 447.6H425.363L426.388 450.168C426.436 450.291 426.473 450.405 426.5 450.512C426.532 450.619 426.556 450.712 426.572 450.792C426.593 450.893 426.606 450.984 426.612 451.064H426.668C426.673 450.984 426.684 450.896 426.7 450.8C426.716 450.715 426.737 450.619 426.764 450.512C426.796 450.405 426.833 450.291 426.876 450.168L427.836 447.6H428.612L426.42 453.36H425.652L426.268 451.68L424.564 447.6ZM436.229 452.08C435.957 452.08 435.712 452.04 435.493 451.96C435.28 451.88 435.096 451.765 434.941 451.616C434.792 451.467 434.675 451.285 434.589 451.072C434.509 450.859 434.469 450.621 434.469 450.36V447.88C434.469 447.619 434.509 447.381 434.589 447.168C434.675 446.955 434.792 446.773 434.941 446.624C435.096 446.475 435.28 446.36 435.493 446.28C435.712 446.2 435.957 446.16 436.229 446.16C436.731 446.16 437.133 446.299 437.437 446.576C437.747 446.848 437.931 447.229 437.989 447.72H437.269C437.237 447.432 437.128 447.208 436.941 447.048C436.76 446.883 436.523 446.8 436.229 446.8C435.909 446.8 435.656 446.896 435.469 447.088C435.283 447.28 435.189 447.544 435.189 447.88V450.36C435.189 450.696 435.28 450.96 435.461 451.152C435.648 451.344 435.904 451.44 436.229 451.44C436.523 451.44 436.76 451.36 436.941 451.2C437.128 451.035 437.237 450.808 437.269 450.52H437.989C437.931 451.011 437.747 451.395 437.437 451.672C437.133 451.944 436.731 452.08 436.229 452.08ZM440.978 452.08C440.706 452.08 440.461 452.04 440.242 451.96C440.029 451.88 439.845 451.765 439.69 451.616C439.541 451.467 439.423 451.285 439.338 451.072C439.258 450.859 439.218 450.621 439.218 450.36V449.24C439.218 448.973 439.258 448.736 439.338 448.528C439.423 448.315 439.541 448.133 439.69 447.984C439.845 447.835 440.029 447.72 440.242 447.64C440.461 447.56 440.706 447.52 440.978 447.52C441.522 447.52 441.951 447.672 442.266 447.976C442.581 448.28 442.738 448.699 442.738 449.232V450.36C442.738 450.893 442.581 451.315 442.266 451.624C441.957 451.928 441.527 452.08 440.978 452.08ZM439.938 450.36C439.938 450.696 440.029 450.96 440.21 451.152C440.397 451.344 440.653 451.44 440.978 451.44C441.298 451.44 441.551 451.344 441.738 451.152C441.925 450.96 442.018 450.696 442.018 450.36V449.24C442.018 448.904 441.925 448.64 441.738 448.448C441.551 448.256 441.298 448.16 440.978 448.16C440.658 448.16 440.405 448.256 440.218 448.448C440.031 448.64 439.938 448.904 439.938 449.24V450.36ZM444.951 447.6V448.36H445.031C445.1 448.099 445.244 447.893 445.463 447.744C445.682 447.595 445.946 447.52 446.255 447.52C446.719 447.52 447.082 447.667 447.343 447.96C447.61 448.248 447.743 448.645 447.743 449.152V449.4H447.023V449.24C447.023 448.893 446.935 448.627 446.759 448.44C446.588 448.248 446.343 448.152 446.023 448.152C445.708 448.152 445.458 448.251 445.271 448.448C445.084 448.64 444.991 448.904 444.991 449.24V452H444.271V447.6H444.951ZM448.756 449.2C448.756 448.944 448.791 448.712 448.86 448.504C448.929 448.296 449.028 448.12 449.156 447.976C449.289 447.832 449.449 447.72 449.636 447.64C449.823 447.56 450.031 447.52 450.26 447.52C450.58 447.52 450.852 447.597 451.076 447.752C451.3 447.901 451.452 448.117 451.532 448.4H451.588V447.6H452.268V451.72C452.268 452.237 452.116 452.64 451.812 452.928C451.508 453.216 451.081 453.36 450.532 453.36H449.452V452.704H450.532C450.852 452.704 451.1 452.619 451.276 452.448C451.457 452.277 451.548 452.035 451.548 451.72V451.52L451.58 450.76H451.532C451.452 451.043 451.3 451.261 451.076 451.416C450.852 451.565 450.58 451.64 450.26 451.64C450.031 451.64 449.823 451.6 449.636 451.52C449.455 451.44 449.297 451.328 449.164 451.184C449.036 451.04 448.935 450.864 448.86 450.656C448.791 450.448 448.756 450.216 448.756 449.96V449.2ZM449.492 449.96C449.492 450.291 449.583 450.549 449.764 450.736C449.951 450.923 450.204 451.016 450.524 451.016C450.844 451.016 451.095 450.923 451.276 450.736C451.457 450.549 451.548 450.291 451.548 449.96V449.2C451.548 448.869 451.457 448.611 451.276 448.424C451.095 448.237 450.844 448.144 450.524 448.144C450.204 448.144 449.951 448.237 449.764 448.424C449.583 448.611 449.492 448.869 449.492 449.2V449.96ZM453.729 452V451.344H455.329V448.256H453.929V447.6H456.049V451.344H457.369V452H453.729ZM455.489 445.88H455.649C455.803 445.88 455.929 445.925 456.025 446.016C456.121 446.107 456.169 446.224 456.169 446.368C456.169 446.512 456.121 446.627 456.025 446.712C455.929 446.797 455.803 446.84 455.649 446.84H455.489C455.334 446.84 455.209 446.8 455.113 446.72C455.017 446.635 454.969 446.517 454.969 446.368C454.969 446.224 455.017 446.107 455.113 446.016C455.209 445.925 455.334 445.88 455.489 445.88ZM463.363 449.04H466.562V449.68H463.363V449.04ZM472.876 446.24H474.716C474.978 446.24 475.215 446.28 475.428 446.36C475.642 446.44 475.823 446.555 475.972 446.704C476.127 446.853 476.244 447.032 476.324 447.24C476.41 447.443 476.452 447.669 476.452 447.92C476.452 448.32 476.348 448.661 476.14 448.944C475.938 449.221 475.66 449.413 475.308 449.52L476.532 452H475.684L474.564 449.6H473.596V452H472.876V446.24ZM473.596 448.96H474.716C475.02 448.96 475.26 448.867 475.436 448.68C475.618 448.488 475.708 448.235 475.708 447.92C475.708 447.605 475.618 447.355 475.436 447.168C475.255 446.976 475.015 446.88 474.716 446.88H473.596V448.96ZM477.593 449.232C477.593 448.704 477.75 448.288 478.065 447.984C478.38 447.675 478.809 447.52 479.353 447.52C479.897 447.52 480.326 447.675 480.641 447.984C480.956 448.288 481.113 448.704 481.113 449.232V450.008H478.305V450.36C478.305 450.701 478.398 450.971 478.585 451.168C478.777 451.365 479.033 451.464 479.353 451.464C479.598 451.464 479.809 451.424 479.985 451.344C480.166 451.259 480.294 451.144 480.369 451H481.089C480.998 451.336 480.796 451.6 480.481 451.792C480.172 451.984 479.796 452.08 479.353 452.08C479.081 452.08 478.836 452.04 478.617 451.96C478.404 451.88 478.22 451.765 478.065 451.616C477.916 451.467 477.798 451.285 477.713 451.072C477.633 450.859 477.593 450.621 477.593 450.36V449.232ZM479.353 448.128C479.033 448.128 478.777 448.229 478.585 448.432C478.398 448.629 478.305 448.896 478.305 449.232V449.416H480.401V449.232C480.401 448.896 480.305 448.629 480.113 448.432C479.926 448.229 479.673 448.128 479.353 448.128ZM482.23 447.6H483.51V446.24H484.23V447.6H485.95V448.256H484.23V450.864C484.23 451.013 484.275 451.131 484.366 451.216C484.462 451.301 484.59 451.344 484.75 451.344H485.87V452H484.75C484.371 452 484.07 451.896 483.846 451.688C483.622 451.48 483.51 451.205 483.51 450.864V448.256H482.23V447.6ZM487.987 447.6V450.448C487.987 451.115 488.304 451.448 488.939 451.448C489.584 451.448 489.907 451.115 489.907 450.448V447.6H490.627V450.448C490.627 450.971 490.48 451.373 490.187 451.656C489.899 451.939 489.483 452.08 488.939 452.08C488.406 452.08 487.992 451.939 487.699 451.656C487.411 451.368 487.267 450.965 487.267 450.448V447.6H487.987ZM492.92 447.6V448.36H493C493.069 448.099 493.213 447.893 493.432 447.744C493.65 447.595 493.914 447.52 49.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0