lodash实现一个螺旋波动方块升降图动画效果代码-html代码-BFW代码库

lodash实现一个螺旋波动方块升降图动画效果代码

代码语言：html

所属分类：动画

代码描述：lodash实现一个螺旋波动方块升降图动画效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
<style>
body {
  background: #012A4A;
}

.wrapper {
  position: absolute;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%) rotateX(45deg) rotateZ(45deg);
  transform-style: preserve-3d;
}

.shape {
  position: relative;
  background: white;
  width: 30px;
  height: 30px;
  padding: 8px;
  transition: 0.5s;
  border-radius: 5px;
  background: #ef476f;
  border: 2px solid #ffb703;
  box-shadow: 200px 200px 20px rgba(255, 249, 214, 0.1);
  animation: bump 1.5s ease-in-out infinite;
}

@keyframes bump {
  50% {
    transform: translateZ(24px);
  }
}
</style>


</head>

<body >
  <div class="wrapper">
  <div class="shape"></div>
  <div class="shape"></div>
  <div class="shape"></div>
  <div class="shape"></div>
  <div class="shape"></div>
  <div class="shape"></div>
  <div class="shape"></div>
  <div class="shape"></div>
  <div class="shape"></div>
  <div class="shape"></div>
  <div class="shape"></div>
  <div class="shape"></div>
  <div class="shape"></div>
  <div class="shape"></div>
  <div class="shape"></div>
  <div class="shape"></div>
  <div class="shape"></div>
  <div class="shape"></div>
  <div class="shape"></div>
  <div class="shape"></div>
  <div class="shape"></div>
  <div class="shape"></div>
  <div class="shape"></div>
  <div class="shape"></div>
  <div class="shape"></div>
  <div class="shape"></div>
  <div class="shape"></div>
.........完整代码请登录后点击上方下载按钮下载查看