anime+css实现许多div模拟波动动画效果代码-html代码-BFW代码库

anime+css实现许多div模拟波动动画效果代码

代码语言：html

所属分类：动画

代码描述：anime+css实现许多div模拟波动动画效果代码

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

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

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


  
  
<style>
body, html {
  margin: 0;
  padding: 0px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000000;
}

#wave-grid {
  display: grid;
  width: 100%;
  height: 100%;
}

.dot-point {
  width: 20px;
  height: 10px;
  background: linear-gradient(to bottom, white, rgba(255, 255, 255, 0.5));
  opacity: 0.5;
  transition: background 0.3s;  cursor: crosshair;
}

.dot-point:hover {
  background: linear-gradient(to bottom, #718096, white); /* Slate-like hover effect */
}

.cursor-crosshair {
  cursor: crosshair;
}

.flex {
  display: flex;
}

.justify-center {
  justify-content: center;
}

.items-center {
  align-items: center;
}
</style>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/anime.3.2.2.js"></script>

</head>

<body translate="no">
  <div id="app" class="w-full h-full flex justify-center items-center">

</div>


      <script  >
function updateGridDimensions() {
  if (window.innerWidth <= 768) {
    return { gridWidth: 11, gridHeight: 23 };
  } else if (window.innerWidth <= 1024) {
    return { gridWidth: 25, gridHeight: 40 };
  } else {
    return { gridWidth: 35, gridHeight: 23 };
  }
}

function createDotGrid(gridWidth, gridHeight) {
  const app = document.getElementById("app");
  const grid = document.createElement("div");
  grid.id = "wave-grid";
  grid.style.gridTemplateColumns.........完整代码请登录后点击上方下载按钮下载查看