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">
        <span class="play-btn__box">
          <span class="cuboid">
            <span class="cuboid__side">
              <span class="top">
                <span class="cuboid">
                  <span class="cuboid__side"></span>
                  <span class="cuboid__side"></span>
                  <span class="cuboid__side"></span>
                  <span class="cuboid__side"></span>
                  <span class="cuboid__side">
                    <span class="controls">
                      <span class="control">
                        <span class="cuboid">
                          <span class="cuboid__side"></span>
                          <span class="cuboid__side"></span>
                          <span class="cuboid__side"></span>
                          <span class="cuboid__side"></span>
                          <span class="cuboid__side"></span>
                          <span class="cuboid__side"></span>
                        </span>
                      </span>
                      <span class="control">
                        <span class="cuboid">
                          <span class="cuboid__side"></span>
                          <span class="cuboid__side"></span>
                          <span class="cuboid__side"></span>
                          <span class="cuboid__side"></span>
                          <span class="cuboid__side"></span>
                          <span class="cuboid__side"></span>
                        </span>
                      </span>
                      <span class="control play">
                        <span class="cuboid">
                          <span class="cuboid__side"></span>
                          <span class="cuboid__side"></span>
                          <span class="cuboid__side"></span>
                          <span class="cuboid__side"></span>
                          <span class="cuboid__side"></span>
                          <span class="cuboid__side"></span>
                        </span>
                      </span>
                    </span>
                  </span>
                  <span class="cuboid__side"></span>
                </span>
              </span>
              <span class="handle">
                <span class="handle__segment handle__top">
                  <span class="cuboid">
                    <span class="cuboid__side"></span>
                    <span class="cuboid__side"></span>
                    <span class="cuboid__side"></span>
                    <span class="cuboid__side"></span>
                    <span class="cuboid__side"></span>
                    <span class="cuboid__side"></span>
                  </span>
                </span>
                <span class="handle__segment handle__left">
                  <span class="cuboid">
                    <span class="cuboid__side"></span>
                    <span class="cuboid__side"></span>
                    <span class="cuboid__side"></span>
                    <span class="cuboid__side"></span>
                    <span class="cuboid__side"></span>
                    <span class="cuboid__side"></span>
                  </span>
                </span>
                <span class="handle__segment handle__right">
                  <span class="cuboid">
                    <span class="cuboid__side"></span>
                    <span class="cuboid__side"></span>
                    <span class="cuboid__side"></span>
                    <span class="cuboid__side"></span>
                    <span class="cuboid__side"></span>
                    <span class="cuboid__side"></span>
                  </span>
                </span>
              </span>
            </span>
            <span class="cuboid__side"></span>
            <span class="cuboid__side"></span>
            <span class="cuboid__side"&g.........完整代码请登录后点击上方下载按钮下载查看