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