瓦片翻转动画效果-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：瓦片翻转动画效果

代码标签：效果

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
html, body {
  height: 100%;
  background-color: #004056;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

.grid-container {
  display: grid;
  grid-template-rows: repeat(20, 20px);
  grid-template-columns: repeat(20, 20px);
}

.tile-1 {
  background-color: #004056;
}

.tile-2 {
  background-color: #C8FED4;
  width: 10px;
  height: 10px;
  animation: slide 4s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}

.tile-1:nth-of-type(3n) .tile-2 {
  animation-delay: 0.1s;
}

.tile-1:nth-of-type(20n+2) .tile-2 {
  animation-delay: 0.1s;
}

.tile-1:nth-of-type(20n+3) .tile-2 {
  animation-delay: 0.15s;
}

.tile-1:nth-of-type(20n+4) .tile-2 {
  animation-delay: 0.2s;
}

.tile-1:nth-of-type(20n+5) .tile-2 {
  animation-delay: 0.25s;
}

.tile-1:nth-of-type(20n+6) .tile-2 {
  animation-delay: 0.3s;
}

.tile-1:nth-of-type(20n+7) .tile-2 {
  animation-delay: 0.35s;
}

.tile-1:nth-of-type(20n+8) .tile-2 {
  animation-delay: 0.4s;
}

.tile-1:nth-of-type(20n+9) .tile-2 {
  animation-delay: 0.45s;
}

.tile-1:nth-of-type(20n+10) .tile-2 {
  animation-delay: 0.5s;
}

.tile-1:nth-of-type(20n+11) .tile-2 {
  animation-delay: 0.55s;
}

.tile-1:nth-of-type(20n+12) .tile-2 {
  animation-delay: 0.6s;
}

.tile-1:nth-of-type(20n+13) .tile-2 {
  animation-delay: 0.65s;
}

.tile-1:nth-of-type(20n+14) .tile-2 {
  animation-delay: 0.7s;
}

.tile-1:nth-of-type(20n+15) .tile-2 {
  animation-delay: 0.75s;
}

.tile-1:nth-of-type(20n+16) .tile-2 {
  animation-delay: 0.8s;
}

.tile-1:nth-of-type(20n+17) .tile-2 {
  animation-delay: 0.85s;
}

.tile-1:nth-of-type(20n+18) .tile-2 {
  animation-delay: 0.9s;
}

.tile-1:nth-of-type(20n+19) .tile-2 {
  animation-delay: 0.95s;
}

.tile-1:nth-of-type(20n+20) .tile-2 {
  animation-delay: 1s;
}

.tile-1:nth-of-type(40n+1),
.tile-1:nth-of-type(40n+3),
.tile-1:nth-of-type(40n+5),
.tile-1:nth-of-type(40n+7),
.tile-1:nth-of-type(40n+9),
.tile-1:nth-of-type(40n+11),
.tile-1:nth-of-type(40n+13),
.tile-1:nth-of-type(40n+15),
.tile-1:nth-of-type(40n+17),
.tile-1:nth-of-type(40n+19),
.tile-1:nth-of-type(40n+22),
.tile-1:nth-of-type(40n+24),
.tile-1:nth-of-type(40n+26),
.tile-1:nth-of-type(40n+28),
.tile-1:nth-of-type(40n+30),
.tile-1:nth-of-type(40n+32),
.tile-1:nth-of-type(40n+34),
.tile-1:nth-of-type(40n+36),
.tile-1:nth-of-type(40n+38),
.tile-1:nth-of-type(40n) {
  background-color: #C8FED4;
}
.tile-1:nth-of-type(40n+1) .tile-2,
.tile-1:nth-of-type(40n+3) .tile-2,
.tile-1:nth-of-type(40n+5) .tile-2,
.tile-1:nth-of-type(40n+7) .tile-2,
.tile-1:nth-of-type(40n+9) .tile-2,
.tile-1:nth-of-type(40n+11) .tile-2,
.tile-1:nth-of-type(40n+13) .tile-2,
.tile-1:nth-of-type(40n+15) .tile-2,
.tile-1:nth-of-type(40n+17) .tile-2,
.tile-1:nth-of-type(40n+19) .tile-2,
.tile-1:nth-of-type(40n+22) .tile-2,
.tile-1:nth-of-type(40n+24) .tile-2,
.tile-1:nth-of-type(40n+26) .tile-2,
.tile-1:nth-of-type(40n+28) .tile-2,
.tile-1:nth-of-type(40n+30) .tile-2,
.tile-1:nth-of-type(40n+32) .tile-2,
.tile-1:nth-of-type(40n+34) .tile-2,
.tile-1:nth-of-type(40n+36) .tile-2,
.tile-1:nth-of-type(40n+38) .tile-2,
.tile-1:nth-of-type(40n) .tile-2 {
  background-color: #004056;
}

@keyframes slide {
  0% {
    transform: translate(0px, 0px);
  }
  25% {
    transform: translate(0, 10px);
  }
  50% {
    transform: translate(10px, 10px);
  }
  75% {
    transform: translate(10px, 0px);
  }
}
</style>

</head>
<body translate="no">
<div class="grid-container">
<div class="tile-1">
<div class="tile-2"></div>
</div>
<div class="tile-1">
<div class="tile-2"></div>
</div>
<div class="tile-1">
<div class="tile-2"></div>
</div>
<div class="tile-1">
<div class="tile-2"></div>
</div>
<div class="tile-1">
<div class="tile-2"></div>
</div>
<div class="tile-1">
<div class="tile-2"></div>
</div>
<div class="tile-1">
<div class="tile-2"></div>
</div>
<div class="tile-1">
<div class="tile-2"></div>
</div>
<div class="tile-1">
<div class="tile-2"></div>
</div>
<div class="tile-1">
<div class="tile-2"></div>
</div>
<div class="tile-1">
<div class="tile-2"></div>
</div>
<div class="tile-1">
<div class="tile-2"></div>
</div>
<div class="tile-1">
<div class="tile-2"></div>
</div>
<div class="tile-1">
<div class="tile-2"></div>
</div>
<div class="tile-1">
<div class="tile-2"></div>
</div>
<div class="tile-1">
<div class="tile-2"></div>
</div>
<div class="tile-1">
<div class="tile-2"></div>
</div>
<div class="tile-1">
<div class="tile-2"></div>
</div>
<div class="tile-1">
<div class="tile-2"></div>
</div>
<div class="tile-1">
<div class="tile-2"></div>
</div>
<div class="tile-1">
<div class="tile-2"></div>
</div>
<div class="tile-1">
<div class="tile-2"></div>
</div>
<div class="tile-1">
<div class="tile-2"></div>
</div>
<div class="tile-1">
<div class="tile-2"></div>
</div>
<div class="tile-1">
<div class="tile-2"></div>
</div>
<div class="tile-1">
<div class="tile-2"></div>
</div>
<div class="tile-1">
<div class="tile-2"></div>
</div>
<div class="tile-1">
<div class="tile-2"></div>
</div>
<div class="tile-1">
<div class="tile-2"></div>
</div>
<div class="tile-1">
<div class="tile-2"></div>
</div>
<div class="tile-1">
<div class="tile-2"></div>
</div>
<div class="tile-1">
<div class="tile-2"></div>
</div>
<div class="tile-1">
<div class="tile-2"></div>
</div>
<div class="tile-1">
<div class="tile-2"></div>
</div>
<div class="tile-1">
<div class="tile-2"></div>
</div>
<div class="tile-1">
<div class="tile-2"></div>
</div>
<div.........完整代码请登录后点击上方下载按钮下载查看