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: 1.........完整代码请登录后点击上方下载按钮下载查看