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);
  }
}
.top-animation-delay-1 {
  animation: top 1s infinite 300ms alternate;
}

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

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

@keyframes opacity {
  from {
    opacity: 0.7;
  }
  to {
    opacity: 1;
  }
}
.opacity-1 {
  opacity: 1 !important;
}

.opacity-2 {
  animation: opacity 1s infinite alternate;
}

.box-shadow-1 {
  box-shadow: 0 0 10px 2px var(--pink);
}

.box-shadow-2 {
  box-shadow: 0 0 6px 1px var(--light-blue);
}

.box-shadow-3 {
  box-shadow: 0 0 10px 5px var(--pink);
}

.border {
  border: 2px solid var(--light-blue);
  border-right-color: transparent;
  border-left-color: transparent;
}

* {
  margin: 0;
}

body {
  display: grid;
  place-items: center;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(45deg, #000000 10%, #093243 100%);
}
body .container {
  width: 300px;
  height: 300px;
}
body .container .mixer {
  position: relative;
  width: 100%;
  height: 200px;
  border-radius: 1rem;
  backgroun.........完整代码请登录后点击上方下载按钮下载查看