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