gsap实现声波音频动画效果代码-html代码-BFW代码库

gsap实现声波音频动画效果代码

代码语言：html

所属分类：动画

代码描述：gsap实现声波音频动画效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        body {
            background-color: #000;
            overflow: hidden;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        body,
        html {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
        }

        svg {
            width: 100%;
            height: 100%;
            visibility: hidden;

        }
    </style>


</head>

<body>
    <svg id="mainSVG" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
        <linearGradient id="grad1" x1="393.05" y1="400" x2="393.05" y2="200" gradientUnits="userSpaceOnUse">
            <stop offset="0" stop-color="#993BDC" />
            <stop offset="1" stop-color="#35AAF9" />
        </linearGradient>
        <g id="bg" fill="none" stroke="url(#grad1)" stroke-linecap="square" stroke-miterlimit="10" stroke-width="3">
            <path d="M594.6,350l-.1-100.29V250" />
            <line x1="580.5" y1="390" x2="580.32" y2="210" />
            <line x1="565.5" y1="415" x2="565.28" y2="185" />
            <line x1="550.5" y1="434" x2="550.24" y2="166" />
            <line x1="535.5" y1="449" x2="535.22" y2="151" />
            <line x1="520.5" y1="462" x2="520.2" y2="138" />
            <line x1="505.5" y1="472" x2="505.18" y2="128" />
            <line x1="490.5" y1="480" x2="490.16" y2="120" />
            <line x1="475.5" y1="487" x2="475.14" y2="113" />
            <line x1="460.5" y1="492" x2="460.14" y2="108" />
            <line x1="445.5" y1="496" x2="445.12" y2="104" />
            <line x1="430.5" y1="499" x2="430.12" y2="101" />
            <line x1="415.5" y1="501" x2="415.12" y2=&q.........完整代码请登录后点击上方下载按钮下载查看