anime实现方形格子波浪动画效果代码-html代码-BFW代码库

anime实现方形格子波浪动画效果代码

代码语言：html

所属分类：动画

代码描述：anime实现方形格子波浪动画效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
  
  
<style>
html,
body {
  background-color: black;
  color: #252423;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 100%;
  height: 100vh;
}

@keyframes colors {
  
  0%{background:rgb(255,182,193);
  
  }
    10%{background:rgb(250,0,0);
  
  }
  
  20%{background:rgb(250,250,0);
  
  }
  
   30%{background:rgb(250,250,250);
  
  }
  
   40%{background:rgb(0,250,250);
  
  }
  
  50%{background:rgb(0,0,250);
  
  }
   
  
   60%{background:rgb(0,250,0);
  
  }
  
  
  70%{background:	rgb(23,23,250);}
  
  80%{background:	rgb(255,105,180);}
 
  89%{background:	rgb(255,218,185); }
  90%{background:	rgb(255,218,185);
  box-shadow:1px 1px 2px 2px purple;}
  
  
  100%{background:	rgb(57,255,20);
  }
  
  
}

.animation-wrapper {
  width: 80%;
  padding-bottom: 40%;
}

.new-visualizer {
  position: absolute;
  width: 1100px;
  height: 550px;
  transform-origin: left top;
}

.new-visualizer .shapes-wrapper {
  transform: translateZ(0);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.new-visualizer .shape {
  position: relative;
  z-index: 1;
  width: 23px;
  height: 23px;
  margin: 16px;
  background:rgb(20,20,20);
  border-radius: 10%;
  transform: skew(50deg);
  -webkit-animation: colors infinite;
  animation-duration:10s;
  animation-delay:0s;
  animation-direction:alternate;

}

@media (min-width: 740px) {
  .new-visualizer .shape {
   
  border-radius: 10%;
  transform: skew(50deg);
   -webkit-animation: colors infinite;
  animation-duration:10s;
  animation-delay:0s;
 animation-direction:alternate;
  }
}

.new-visualizer .cursor {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 37px;
  height: 37px;
  margin: 9px;
  background-color: rgb(0,0,0);
  border-radius: 10%;
}
</style>



</head>

<body>
<!-- partial:index.partial.html -->
<div class="animation-wrapper">
  <div class="new-visualizer">
    <div class="cursor color-red"></div>
    <div class="shapes-wrapper"></div>
  </div>
</div>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/anime.3.0.1.js"></script>

      <script >
function fitElementToParent(el, padding) {
  var timeout = null;
  function resize() {
    if (timeout) clearTimeout(timeout);
    anime.set(el, {scale: 1});
    var pad = padding || 0;
    var parentEl = el.parentNode;
    var elOffsetWidth = el.offsetWidth - pad;
    var parentOffsetWidth = parentEl.offsetWidth;
    var ratio = parentOffsetWidth / elOffsetWidth;
    t.........完整代码请登录后点击上方下载按钮下载查看