js+css实现带数值变化的液态容器内水平线上升下降动画代码-html代码-BFW代码库

js+css实现带数值变化的液态容器内水平线上升下降动画代码

代码语言：html

所属分类：动画

代码描述：js+css实现带数值变化的液态容器内水平线上升下降动画代码叠层效果代码

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

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

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



  
  
<style>

@import url("https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap");
.backdrop {
  position: fixed;
  bottom: 0;
  left: 0;

   background: white;
  height: 100%;
  z-index: -1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.backdrop canvas {
  width: 100vw;
  flex: 0 0 60px;
  transform: translateY(1px);
}
@keyframes grow {
  0% {
    flex: 0 0 0vh;
  }
  50% {
    flex: 0 0 90vh;
  }
  100% {
    flex: 0 0 0vh;
  }
}
.backdrop .filler {
  background: #8ed6ff;
  flex: 0 0 0vh;
  animation: grow 16s ease-in-out infinite;
}

@keyframes wave {
  0% {
    transform: rotate(-2deg) translatex(-2vw);
  }
  25% {
    transform: rotate(1deg) translatex(2vw);
  }
  50% {
    transform: rotate(-1deg) translatex(-2vw);
  }
  75% {
    transform: rotate(2deg) translatex(2vw);
  }
  100% {
    transform: rotate(-2deg) translatex(-2vw);
  }
}
.content {
  position: fixed;
  width: 100%;
  height: 100%;
  font-family: "Share Tech Mono", monospace;
  letter-spacing: -3rem;
  font-size: 20rem;
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgba(122, 207, 255, 0.5);
  text-shadow: 0 0 120px rgba(255, 255, 255, 0.9);
  filter: blur(2px);
  animation: wave 7s infinite ease-in-out;
}
</style>

  
</head>

<body translate="no">
  <div class="backdrop">
	<canvas id="canvas1"></canvas>
	<div id="filler" class="filler"></div>
</div>

<div class="content">
	<p id="wh"></p>
</div>

  
      <script  >
const n = 12;
const width = 1400;
const height = 60;

let points = [];
for (let i = 0; i <= n + 1; i++) {
  let x = width / n * i + (-20 + Math.random() * 40);
  let y = 15 + Math.random() * 20;
  points.push({
    x,
    y,
    ox: x,
    oy: y,
    t: Math.random() * 2 * Math.PI,
.........完整代码请登录后点击上方下载按钮下载查看