gsap+svg实现播放按钮点击变换成收音机播放音乐效果代码-html代码-BFW代码库

代码语言：html
所属分类：多媒体
代码描述：gsap+svg实现播放按钮点击变换成收音机播放音乐效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  


  
  
<style>
*,
*:after,
*:before {
        box-sizing: border-box;
        transform-style: preserve-3d;
}

:root {
        --handle-girth: 10;
        --handle-multiplier: 0.5px;
        --surface-1: hsl(210 10% 50%);
        --surface-2: hsl(210 10% 40%);
        --surface-3: hsl(210 10% 30%);
        --surface-4: hsl(210 10% 20%);
        --surface-5: hsl(210 10% 10%);
        --speaker: hsl(0 0% 6%);
        --trim: hsl(0 0% 90%);
        --tweeter: hsl(0 0% 30%);
        --handle: hsl(0 0% 8%);
/*      --handle: var(--trim);*/
        --label: hsl(0 0% 98%);
        --top: hsl(210 10% 65%);
        --front: var(--surface-1);
        --grill: hsl(0 0% 10%);
        --back: var(--surface-3);
        --cassette: hsl(0 0% 0%);
        --control: hsl(210 80% 80%);
        --play: hsl(10 80% 80%);
        --accent: hsl(10 50% 50%);
        --drawer: hsl(210 10% 6%);
}

body {
        background: hsl(210 34% 84%);
        display: grid;
        place-items: center;
        min-height: 100vh;
        font-family:  'Google Sans', sans-serif, system-ui;
}

span {
        display: block;
}

.play-btn {
        position: relative;
        border: 0;
        padding: 0;
        background: none;
}

.play-btn__text {
        color: white;
        padding: 1rem 2rem;
        background: var(--front);
}

.txt {
        display: flex;
        align-items: center;
        gap: 0.5rem;
}

.play-btn__text svg {
        width: 24px;
}

.play-btn__box {
        --depth: var(--boom-depth);
        display: none;
        position: absolute;
        inset: 0;
        color: var(--surface-3);
        opacity: 1;
        transform: translate3d(0, 0, -1px);
/*      transform: translate3d(0, 0, calc(var(--boom-depth) * -0.5px));*/
}

.play-btn__box > .cuboid > .cuboid__side:nth-of-type(2):after {
        content: "";
        height: 16%;
        width: 60%;
        position: absolute;
        bottom: 6%;
        right: 0;
        background:
                repeating-linear-gradient(0deg, var(--grill) 0 20%, transparent 20% 40%);
}

.speaker {
        position: absolute;
        height: 55%;
        aspect-ratio: 1;
        border-radius: 50%;
        bottom: 0;
        background: conic-gradient(from 190deg, hsl(0 0% 20%) 0 45deg, transparent 0deg), var(--speaker);
        border: 4px solid var(--trim);
}

.tweeter {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        height: 50%;
        aspect-ratio: 1;
        border-radius: 50%;
        background: var(--tweeter);
}

.controls {
        position: absolute;
        bottom: 10%;
        left: 10%;
        height: 16%;
        display: flex;
        gap: 4px;
}

.bear {
        position: absolute;
        left: 5%;
        top: 5%;
        width: 20%;
        rotate: -30deg;
}

.brand {
        color: var(--trim);
        text-shadow: 2px 2px red;
        position: absolute;
        right: 4%;
        top: 8%;
        font-size: 1rem;
        font-family: monospace;
        font-weight: bold;
}

.brand:after {
        content: "";
        position: absolute;
        top: 110%;
        width: 100%;
        aspect-ratio: 2 / 1;
        background: var(--label);
        right: 0;
}

.control {
        --depth: 20;
        height: 100%;
        aspect-ratio: 1;
        color: var(--control);
}

.control:nth-of-type(1) {
        color: hsl(130 80% 80%);
}

.cogs {
        position: absolute;
        top: 50%;
        left: 50%;
        translate: -50% -50%;
        height: 40%;
        width: 70%;
        display: flex;
        justify-content: space-between;
}

.cogs:after {
        content: "";
        font-family: cursive;
        background: white;
        height: 0.5rem;
        position: absolute;
        top: 110%;
        width: 80%;
        left: 50%;
        overflow: hidden;
        translate: -50% 0;
}

.cog {
        fill: black;
        stroke: var(--trim);
}

.control:nth-of-type(3) {
        aspect-ratio: 2 / 1;
        color: var(--play);
}

.speaker--left {
        left: 0;
        translate: 10% -10%;
}

.speaker--right {
        right: 0;
        translate: -10% -10%;
}

.cassette-hole {
        --depth: 20;
        color: var(--surface-4);
        aspect-ratio: 4 / 2.5;
        width: 25%;
        position: absolute;
        top: 50%;
        left: 50%;
        translate: -50% 0;
        transform-origin: 50% 100%;
        transform: translate3d(0, 0, -11px);
}

.cassette-hole .cuboid__side:nth-of-type(5) {
        display: none;
}

.cassette {
        --depth: 10;
        color: var(--cassette);
        width: 90%;
        aspect-ratio: 4 / 2.5;
        transform: translate3d(0, 0, -11px);
}

.cassette-deck {
        aspect-ratio: 4 / 2.5;
        background:
                linear-gradient(90deg, var(--drawer) 10px, transparent 10px calc(100% - 10px), var(--drawer) calc(100% - 10px)),
                linear-gradient(0deg, var(--drawer) 10px, transparent 10px calc(100% - 10px), var(--drawer) calc(100% - 10px)),
                linear-gradient(-65deg, transparent 70%, hsl(0 0% 100% / 0.5) 70.5% 80%, transparent 80.5% 82%, hsl(0 0% 100% / 0.5) 82.5% 84%, transparent 84.5%),
                hsl(0 0% 100% / 0.2);
        display: grid;
        place-items: center;
        width: 25%;
        position: absolute;
        top: 50%;
        left: 50%;
        translate: -50% 0;
        transform-origin: 50% 100%;
        transform: rotateX(0deg);
}

.cassette .cuboid__side:nth-of-type(5) {
        background: linear-gradient(90deg, transparent 60%, red 60.5% 70.5%, transparent 71%), var(--cassette);
}

.cassette-deck:after,
.cassette-deck:before {
        content: "";
        position: absolute;
        bottom: 0;
        height: 85%;
        width: 10%;
        background: var(--drawer);
}

.cassette-deck:after {
        left: 100%;
        transform-origin: 0 50%;
        transform: rotateY(90deg);
        -webkit-clip-path: polygon(0 0, 100% 25%, 100% 100%, 0 100%);
                clip-path: polygon(0 0, 100% 25%, 100% 100%, 0 100%);
}

.cassette-deck:before {
        right: 100%;
        transform-origin: 100% 50%;
        transform: rotateY(-90deg);
        -webkit-clip-path: polygon(0 25%, 100% 0%, 100% 100%, 0 100%);
                clip-path: polygon(0 25%, 100% 0%, 100% 100%, 0 100%);
}

.play-btn > .cuboid {
        color: var(--back);     
}

.play-btn__box > .cuboid > .cuboid__side:nth-of-type(5) {
        filter: none;
  height: 100%;
  width: 100%;
  transform: translate3d(0, 0, calc(var(--depth, 20) * 0.5px));
  top: 0;
  left: 0;
  background:
        linear-gradient(180deg, var(--front) 50%, transparent 50% 77%, var(--front) 77%),
        linear-gradient(90deg, var(--front) 38.5%, transparent 38.5% 62.5%, var(--front) 62.5%),
        hsl(0 0% 50% / var(--fill, 0));
}

.eq-wrap {
        width: 25%;
        aspect-ratio: 16 / 6;
        top: 20%;
        position: absolute;
        left: 50%;
        translate: -50% 0;
}

.eq {
        border: 4px solid black;
        aspect-ratio: 16 / 6;
        width: 100%;
        background: black;
}

.eq-wrap:after {
        content: "";
        position: absolute;
        inset: 0;
        border: 4px solid black;
        background:
                linear-gradient(-65deg, transparent 50%, hsl(0 0% 100% / 0.5) 50.5% 60%, transparent 60.5% 62%, hsl(0 0% 100% / 0.5) 62.5% 64%, transparent 64.5%);
}

.top {
        position: absolute;
        bottom: 10%;
        width: calc(90% - (2 * (var(--handle-girth) * 1px)));
        height: 90%;
        --depth: calc(var(--active) * 40);
        left: 50%;
        translate: -50% 0;
        color: var(--top);
        transform: translate3d(0, 0, -20px);
}

.top .cuboid__side:nth-of-type(2) {
        background: var(--back);
}

.play-btn__backdrop {
        background: var(--surface);
        position: absolute;
        inset: 0;
        z-index: 0;
}

.play-btn__box > .cuboid > .cuboid__side:nth-of-type(6) {
        background:
                linear-gradient(0deg, var(--back) calc(100% - (var(--handle-girth) * 1px)), transparent calc(100% - (var(--handle-girth) * 1px))),
                linear-gradient(90deg, var(--back) 5%, transparent 5% 95%, var(--back) 95%);
}

.top > .cuboid > .cuboid__side:nth-of-type(5):after {
        content: "";
        position: absolute;
        right: 10%;
        top: 0;
        background: repeating-linear-gradient(90deg, var(--grill) 0 5%, transparent 5% 10%);
        height: 30%;
        width: 36%;
}

.play-btn__box > .cuboid > .cuboid__side:nth-of-type(1) {
        background:
                linear-gradient(0deg, var(--top) 10%, transparent 10%),
                linear-gradient(90deg, var(--top) 5%, transparent 5% 95%, var(--top) 95%);
}

.handle {
        color: var(--handle);
        height: 80%;
        position: absolute;
        top: 0;
        left: 50%;
        translate: -50% 0;
        width: 90%;
        transform-origin: 50% 100%;
        transform: translate3d(0, 0, calc(var(--handle-girth) * -0.5px)) rotateX(0deg);
}

.handle__segment {
        --depth: calc(var(--active) * var(--handle-girth));
        position: absolute;
}

.handle__left {
        width: calc(var(--handle-girth) * var(--handle-multiplier));
        height: 100%;
        left: 0;
}
.handle__right {
        width: calc(var(--handle-girth) * var(--handle-multiplier));
        height: 100%;
        right: 0;
}

.handle__top {
        height: calc(var(--handle-girth) * var(--handle-multiplier));
        width: 100%;
}

.btn-scene {
        --active: 0;
        position: relative;
}

.btn-shadow {
        width: 100%;
        aspect-ratio: 4 / 1;
        background: hsl(0 0% 10%);
        top: 100%;
        position: absolute;
        translate: 0 -50%;
        transform: rotateX(90deg) translate(0, -1px);
}

/* Cuboid related stuff */
.cuboid {
  --color-range-lower: 180;
  --color-range-upper: 340;
  --step: calc((var(--color-range-upper) - var(--color-range-lower)) / var(--count));
  --alpha: calc(1 - ((0.85 / var(--count)) * var(--index)));
  --color: hsl(calc(var(--color-range-lower) + (var(--step) * var(--index))) 80% 60% / var(--alpha));
  --bg: currentColor;
}


/* Cuboid boilerplate code */
.cuboid {
  width: 100%;
  height: 100%;
  position: relative;
}
.cuboid__side {
  background: var(--bg);
  filter: brightness(var(--b, 1));
  border: calc(var(--size) * 0.0075vmin) solid var(--color);
  position: absolute;
}
.cuboid__side:nth-of-type(1) {
  --b: 1.1;
  filter: none;
  height: calc(var(--depth, 20) * 1px);
  width: 100%;
  top: 0;
/*  perspective: 100vmin;*/
  transform: translate(0, -50%) rotateX(90deg);
}
.cuboid__side:nth-of-type(2) {
  --b: 0.9;
  height: 100%;
  width: calc(var(--depth, 20) * 1px);
  top: 50%;
  right: 0;
  transform: translate(50%, -50%) rotateY(90deg);
}
.cuboid__side:nth-of-type(3) {
  --b: 0.5;
  width: 100%;
  height: calc(var(--depth, 20) * 1px);
  bottom: 0;
  transform: translate(0%, 50%) rotateX(90deg);
}
.cuboid__side:nth-of-type(4) {
  --b: 1;
  height: 100%;
  width: calc(var(--depth, 20) * 1px);
  left: 0;
  top: 50%;
  transform: translate(-50%, -50%) rotateY(90deg);
}
.cuboid__side:nth-of-type(5) {
        filter: none;
  height: 100%;
  width: 100%;
  transform: translate3d(0, 0, calc(var(--depth, 20) * 0.5px));
  top: 0;
  left: 0;
/*  perspective: 100vmin;*/
}
.cuboid__side:nth-of-type(6) {
  --b: 1.2;
  height: 100%;
  width: 100%;
  transform: translate3d(0, 0, calc(var(--depth, 20) * -0.5px)) rotateY(180deg);
  top: 0;
  left: 0;
}
</style>


</head>

<body >

<div class="btn-scene">
  <div class="btn-jump">
    <div class="btn-tip">
      <button class="play-btn">
   .........完整代码请登录后点击上方下载按钮下载查看