svg+css实现声音频谱波动loading加载动画效果代码-html代码-BFW代码库

svg+css实现声音频谱波动loading加载动画效果代码

代码语言：html

代码描述：svg+css实现声音频谱波动loading加载动画效果代码

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

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

<head>
  <meta charset="UTF-8">
  

  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  
  
  
<style>
* {
        border: 0;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
}
:root {
        --hue: 223;
        --bg: hsl(var(--hue),90%,90%);
        --fg: hsl(var(--hue),90%,10%);
        --trans-dur: 0.3s;
        font-size: calc(16px + (24 - 16) * (100vw - 320px) / (2560 - 320));
}
body {
        background-color: var(--bg);
        color: var(--fg);
        display: flex;
        font: 1em/1.5 sans-serif;
        height: 100vh;
        transition:
                background-color var(--trans-dur),
                color var(--trans-dur);
}
.pl {
        display: block;
        margin: auto;
        width: 16em;
        height: auto;
}
.pl line {
        animation-duration: 3s;
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite;
}
.pl__line1,
.pl__line9 {
        animation-name: line1;
}
.pl__line2,
.pl__line8 {
        animation-name: line2;
}
.pl__line3,
.pl__line7 {
        animation-name: line3;
}
.pl__line4,
.pl__line6 {
        animation-name: line4;
}
.pl__line5 {
        animation-name: line5;
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
        :root {
                --bg: hsl(var(--hue),90%,10%);
                --fg: hsl(var(--hue),90%,90%);
        }
}

/* Animations */
@keyframes line1 {
        from,
        8% {
                stroke-dashoffset: 31.99;
                transform: translate(0,16px);
        }
        18% {
                stroke-dashoffset: 16;
                transform: translate(0,8px);
        }
        28% {
                stroke-dashoffset: 31.99;
                transform: translate(0,16px);
        }
        38% {
                stroke-dashoffset: 0;
                transform: translate(0,0);
        }
        48% {
                opacity: 1;
                stroke-dashoffset: 31.99;
                transform: translate(0,16px);
        }
        53% {
                opacity: 0;
                stroke-dashoffset: 31.99;
                transform: translate(8px,16px);
        }
        56% {
                animation-timing-function: steps(1,start);
                opacity: 0;
                stroke-dashoffset: 32;
                transform: translate(0,16px);
        }
        60% {
                animation-timing-function: ease-out;
                opacity: 1;
                stroke-dashoffset: 32;
                transform: translate(0,16px);
        }
        70% {
                animation-timing-function: ease-in-out;
                stroke-dashoffset: 0;
                transform: translate(0,0);
        }
        80% {
                stroke-dashoffset: 31.99;
                transform: translate(0,16px);
        }
        90% {
                stroke-dashoffset: 16;
                transform: translate(0,8px);
        }
        to {
                stroke-dashoffset: 31.99;
                transform: translate(0,16px);
        }
}
@keyframes line2 {
        from,
        6% {
                stroke-dashoffset: 31.99;
                transform: translate(0,16px);
        }
        16% {
                stroke-dashoffset: 16;
                transform: translate(0,8px);
        }
        26% {
                stroke-dashoffset: 31.99;
                transform: translate(0,16px);
        }
        36% {
                stroke-dashoffset: 0;
                transform: translate(0,0);
        }
        46% {
                opacity: 1;
                stroke-dashoffset: 31.99;
                transform: translate(0,16px);
        }
        51% {
                opacity: 0;
                stroke-dashoffset: 31.99;
                transform: translate(8px,16px);
        }
        54% {
                animation-timing-function: steps(1,start);
                opacity: 0;
                stroke-dashoffset: 32;
                transform: translate(0,16px);
        }
        58% {
                animation-timing-function: ease-out;
                opacity: 1;
                stroke-dashoffset: 32;
                transform: translate(0,16px);
        }
        68% {
                animation-timing-function: ease-in-out;
                stroke-dashoffset: 0;
                transform: translate(0,0);
        }
        78% {
                stroke-dashoffset: 31.99;
                transform: translate(0,16px);
        }
        88% {
                stroke-dashoffset: 16;
                transform: translate(0,8px);
        }
        98%,
        to {
                stroke-dasho.........完整代码请登录后点击上方下载按钮下载查看