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

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

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