css+js实现炫酷混音视觉动画播放效果代码-html代码-BFW代码库

css+js实现炫酷混音视觉动画播放效果代码

代码语言：html

所属分类：动画

代码描述：css+js实现炫酷混音视觉动画播放效果代码

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

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

<head>
  <meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap-icons.1.5.css">
  
  
<style>
:root {
  --bg-color: #f5db02;
  --black: #000204;
  --dark-blue: #093243;
  --blue-blue: #005669;
  --light-blue: #00ad9f;
  --pink: #721839;
}

@keyframes rot {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
.rot-animation-500ms {
  animation: rot 500ms infinite linear;
}

.rot-animation-1000ms {
  animation: rot 1s infinite linear;
}

@keyframes light {
  to {
    box-shadow: 0 0 10px 2px var(--pink);
  }
}
.light-animation-delay-1 {
  animation: light 1s infinite 100ms linear;
}

.light-animation-delay-2 {
  animation: light 1s infinite 200ms linear;
}

.light-animation-delay-3 {
  animation: light 1s infinite 300ms linear;
}

.light-animation-delay-4 {
  animation: light 1s infinite 400ms linear;
}

.light-animation-delay-5 {
  animation: light 1s infinite 500ms linear;
}

@keyframes top-down {
  0% {
    top: 10%;
  }
  25% {
    top: 30%;
  }
  50% {
    top: 20%;
  }
  60% {
    top: 40%;
  }
  70% {
    top: 20%;
  }
  80% {
    top: 40%;
  }
  100% {
    top: 0;
  }
}
.top-down-animation-delay-1 {
  animation: top-down 1s infinite 300ms;
}

.top-down-animation-delay-2 {
  animation: top-down 1s infinite 600ms;
}

.top-down-animation-delay-3 {
  animation: top-down 1s infinite 900ms;
}

@keyframes top {
  to {
    top: calc(100% - 8px);
  }
}
..........完整代码请登录后点击上方下载按钮下载查看