gsap+svg实现收音机打开天线播放音乐效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：gsap+svg实现收音机打开天线播放音乐效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        html,
        body {
        	height: 100%;
        	margin: 0;
        	display: grid;
        	place-items: center;
        }
        body {
        	background-color: rgb(155, 212, 187);
        }
        svg {
        	width: 81vmin;
        	height: 100vh;
        }
    </style>




</head>

<body>
    <svg id="radio" xmlns="http://www.w3.org/2000/svg" width="174" height="188.00024" viewBox="-50 0 274 188.00024">
	<defs>
		<style>
			.cls-1 {
				opacity: 0.24;
			}

			.cls-2 {
				fill: #51361c;
			}

			.cls-3 {
				fill: #77604d;
			}

			.cls-4 {
				fill: #eaeaea;
			}

			.cls-5 {
				fill: #4f4f4f;
			}

			.cls-6 {
				fill: #9e9e9e;
			}

			.cls-7 {
				fill: none;
			}

			.cls-8 {
				fill: #c14040;
			}

			.cls-9 {
				fill: #cca650;
			}

			.cls-10 {
				fill: #7a7a7a;
			}

			.cls-11 {
				fill: #eee;
			}

			.cls-12 {
				fill: #ccc;
			}

			.cls-13 {
				fill: #818181;
			}
		</style>
	</defs>
	<title>radio</title>
	<rect
		id="shadow"
		class="cls-1"
		y="165.00024"
		width="174"
		height="23"
		rx="11.49999"
	/>
	<g id="radio-body">
		<g id="cabinet">
			<g id="outer-cabinet">
				<rect
					class="cls-2"
					x="12"
					y="102.50024"
					width="150"
					height="81"
					rx="12.04255"
				/>
			</g>
			<g id="inner-cabinet">
				<rect
					class="cls-3"
					x="17"
					y="107.50024"
					width="140"
					height="71"
					rx="8.43617"
				/>
			</g>
		</g>
		<g id="drivers">
			<circle
				id="outer"
				class="cls-4"
				cx="46.53247"
				cy="143.03271"
				r="21"
			/>
			<g id="inner">
				<path
					class="cls-5"
					d="M71.186,137.4942l25.87746,9.7713A18.94,18.94,0,0,0,71.186,137.4942Z"
					transform="translate(-33 -11.509)"
				/>
				<path
					class="cls-5"
					d="M98.431,156.3332a18.89237,18.89237,0,0,0-.53706-6.61629l-28.95132-10.932a18.89233,18.89233,0,0,0-4.77611,4.61Z"
					transform="translate(-33 -11.509)"
				/>
				<path
					class="cls-5"
					d="M90.12234,170.29851a18.89229,18.89229,0,0,0,4.7761-4.61L60.634,152.75023a18.89237,18.89237,0,0,0,.53705,6.61629Z"
					transform="translate(-33 -11.509)"
				/>
				<path
					class="cls-5"
					d="M63.06,145.115a17.47313,17.47313,0,0,0-2.11953,5.61316L96.005,163.96847a17.47342,17.47342,0,0,0,2.11952-5.61316Z"
					transform="translate(-33 -11.509)"
				/>
				<path
					class="cls-5"
					d="M62.00146,161.81793a18.94,18.94,0,0,0,25.87741,9.77128Z"
					transform="translate(-33 -11.509)"
				/>
			</g>
		</g>
		<g id="channel-needle">
			<rect
				id="background"
				class="cls-4"
				x="77.5"
				y="118.00024"
				width="70"
				height="10"
				rx="1.0266"
			/>
			<path
				id="row-line"
				class="cls-6"
				d="M180.5,135.00924h-70a.5.5,0,0,1,0-1h70a.5.5,0,0,1,0,1Z"
				transform="translate(-33 -11.509)"
			/>
			<g id="column-lines">
				<path
					class="cls-6"
					d="M114,137.50924a.49971.49971,0,0,1-.5-.5v-5a.5.5,0,0,1,1,0v5A.49971.49971,0,0,1,114,137.50924Z"
					transform="translate(-33 -11.509)"
				/>
				<path
					class="cls-6"
					d="M117,137.50924a.49971.49971,0,0,1-.5-.5v-5a.5.5,0,0,1,1,0v5A.49971.49971,0,0,1,117,137.50924Z"
					transform="translate(-33 -11.509)"
				/>
				<path
					class="cls-6"
					d="M120,137.50924a.49971.49971,0,0,1-.5-.5v-5a.5.5,0,0,1,1,0v5A.49971.49971,0,0,1,120,137.50924Z"
					transform="translate(-33 -11.509)"
				/>
				<path
					class="cls-6"
					d="M123,137.50924a.49971.49971,0,0,1-.5-.5v-5a.5.5,0,0,1,1,0v5A.49971.49971,0,0,1,123,137.50924Z"
					transform="translate(-33 -11.509)"
				/>
				<path
					class="cls-6"
					d="M126,137.50924a.49971.49971,0,0,1-.5-.5v-5a.5.5,0,1,1,1,0v5A.49971.49971,0,0,1,126,137.50924Z"
					transform="translate(-33 -11.509)"
				/>
				<path
					class="cls-6"
					d="M129,137.50924a.49971.49971,0,0,1-.5-.5v-5a.5.5,0,1,1,1,0v5A.49971.49971,0,0,1,129,137.50924Z"
					transform="translate(-33 -11.509)"
				/>
				<path
					class="cls-6"
					d="M132,137.50924a.49971.49971,0,0,1-.5-.5v-5a.5.5,0,1,1,1,0v5A.49971.49971,0,0,1,132,137.50924Z"
					transform="translate(-33 -11.509)"
				/>
				<path
					class="cls-6"
					d="M135,137.50924a.49971.49971,0,0,1-.5-.5v-5a.5.5,0,1,1,1,0v5A.49971.49971,0,0,1,135,137.50924Z"
					transform="translate(-33 -11.509)"
				/>
				<path
					class="cls-6"
					d="M138,137.50924a.49971.49971,0,0,1-.5-.5v-5a.5.5,0,1,1,1,0v5A.49971.49971,0,0,1,138,137.50924Z"
					transform="translate(-33 -11.509)"
				/>
				<path
					class="cls-6"
					d="M141,137.50924a.49971.49971,0,0,1-.5-.5v-5a.5.5,0,1,1,1,0v5A.49971.49971,0,0,1,141,137.50924Z"
					transform="translate(-33 -11.509)"
				/>
				<path
					class="cls-6"
					d="M144,137.50924a.49971.49971,0,0,1-.5-.5v-5a.5.5,0,1,1,1,0v5A.49971.49971,0,0,1,144,137.50924Z"
					transform="translate(-33 -11.509)"
				/>
				<path
					class="cls-6"
					d="M147,137.50924a.49971.49971,0,0,1-.5-.5v-5a.5.5,0,1,1,1,0v5A.49971.49971,0,0,1,147,137.50924Z"
					transform="translate(-33 -11.509)"
				/>
				<path
					class="cls-6"
					d="M150,137.50924a.49971.49971,0,0,1-.5-.5v-5a.5.5,0,1,1,1,0v5A.49971.49971,0,0,1,150,137.50924Z"
					transform="translate(-33 -11.509)"
				/>
				<path
					class="cls-6"
					d="M153,137.50924a.49971.49971,0,0,1-.5-.5v-5a.5.5,0,1,1,1,0v5A.49971.49971,0,0,1,153,137.50924Z"
					transform="translate(-33 -11.509)"
				/>
				<path
					class="cls-6"
					d="M156,137.50924a.49971.49971,0,0,1-.5-.5v-5a.5.5,0,1,1,1,0v5A.49971.49971,0,0,1,156,137.50924Z"
					transform="translate(-33 -11.509)"
				/>
				<path
					class="cls-6"
					d="M159,137.50924a.49971.49971,0,0,1-.5-.5v-5a.5.5,0,1,1,1,0v5A.49971.49971,0,0,1,159,137.50924Z"
					transform="translate(-33 -11.509)"
				/>
				<path
					class="cls-6"
					d="M162,137.50924a.49971.49971,0,0,1-.5-.5v-5a.5.5,0,1,1,1,0v5A.49971.49971,0,0,1,162,137.50924Z"
					transform="translate(-33 -11.509)"
				/>
				<path
					class="cls-6"
					d="M165,137.50924a.49971.49971,0,0,1-.5-.5v-5a.5.5,0,1,1,1,0v5A.49971.49971,0,0,1,165,137.50924Z"
					transform="translate(-33 -11.509)"
				/>
				<path
					class="cls-6"
					d="M168,137.50924a.49971.49971,0,0,1-.5-.5v-5a.5.5,0,1,1,1,0v5A.49971.49971,0,0,1,168,137.50924Z"
					transform="translate(-33 -11.509)"
				/>
				<path
					class="cls-6"
					d="M171,137.50924a.49971.49971,0,0,1-.5-.5v-5a.5.5,0,1,1,1,0v5A.49971.49971,0,0,1,171,137.50924Z"
					transform="translate(-33 -11.509)"
				/>
				<path
					class="cls-6"
					d="M174,137.50924a.49971.49971,0,0,1-.5-.5v-5a.5.5,0,1,1,1,0v5A.49971.49971,0,0,1,174,137.50924Z"
					transform="translate(-33 -11.509)"
				/>
				<path
					class="cls-6"
					d="M177,137.50924a.49971.49971,0,0,1-.5-.5v-5a.5.5,0,1,1,1,0v5A.49971.49971,0,0,1,177,137.50924Z"
					transform="translate(-33 -11.509)"
				/>
			</g>
			<g id="red-line-container">
				<rect
					id="background-2"
					data-name="background"
					class="cls-7"
					x="77.5"
					y="118.00024"
					width="52"
					height="10"
					rx="1.0266"
				/>
				<path
					id="red-line"
					class="cls-8.........完整代码请登录后点击上方下载按钮下载查看