tachyons实现跳动的色块效果-html代码-BFW代码库

tachyons实现跳动的色块效果

代码语言：html

所属分类：动画

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

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

<link rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/tachyons.min.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
:root {
  --green-darker: #196127;
  --green-dark: #239A3B;
  --green-regular: #7BC96F;
  --green-light: #C6E48B;
  --green-lighter: #E9F7CE;
  --grey: #EBEDF0;
  --time: 2s;
}

.bg-gray {
  background-color: var(--grey);
}

.square-1 {
  animation: square-1 var(--time) infinite alternate forwards;
}

.square-2 {
  animation: square-2 var(--time) infinite alternate forwards;
}

.square-3 {
  animation: square-3 var(--time) infinite alternate forwards;
}

.square-4 {
  animation: square-4 var(--time) infinite alternate forwards;
}

.square-5 {
  animation: square-5 var(--time) infinite alternate forwards;
}

@keyframes square-1 {
  0% {
    background-color: var(--grey);
  }
  49% {
    background-color: var(--grey);
  }
  50% {
    background-color: var(--green-darker);
  }
  100% {
    background-color: var(--green-darker);
  }
}
@keyframes square-2 {
  0% {
    background-color: var(--grey);
  }
  74% {
    background-color: var(--grey);
  }
  75% {
    background-color: var(--green-dark);
  }
  100% {
    background-color: var(--green-dark);
  }
}
@keyframes square-3 {
  0% {
    background-color: var(--grey);
  }
  87.4% {
    background-color: var(--grey);
  }
  87.5% {
    background-color: var(--green-regular);
  }
  100% {
    background-color: var(--green-regular);
  }
}
@keyframes square-4 {
  0% {
    background-color: var(--grey);
  }
  93.74% {
    background-color: var(--grey);
  }
  93.75% {
    background-color: var(--green-light);
  }
  100% {
    background-color: var(--green-light);
  }
}
@keyframes square-5 {
  0% {
    background-color: var(--grey);
  }
  96.81% {
    background-color: var(--grey);
  }
  96.82% {
    background-color: var(--green-lighter);
  }
  100% {
    background-color: var(--green-lighter);
  }
}
</style>

</head>
<body translate="no">
<section class="flex justify-center vh-100 w-100 bg-near-white pa6 bg-near-white">
<div>
<h1 class="db f4 sans-serif">Github Groovy</h1>
<div class="db cf nl1 h4 bg-white br2 pa3 br2 shadow-1">
<article class="nl1 fl" style="--time: 0.5s">
<div class="ml1 mb1 h1 w1 db bg-gray"></div>
<div class="ml1 mb1 h1 w1 db square-4"></div>
<div class="ml1 mb1 h1 w1 db square-3"></div>
<div class="ml1 mb1 h1 w1 db square-2"></div>
<div class="ml1 mb1 h1 w1 db square-1"></div>
</article>
<article class="fl" style="--time: 1s">
<div class="ml1 mb1 h1 w1 db bg-gray"></div>
<div class="ml1 mb1 h1 w1 db square-4"></div>
<div class="ml1 mb1 h1 w1 db square-3"></div>
<div class="ml1 mb1 h1 w1 db square-2"></div>
<div class="ml1 mb1 h1 w1 db square-1"></div>
</article>
<article class="fl" style="--time: 0.75s">
<div class="ml1 mb1 h1 w1 db bg-gray"></div>
<div class="ml1 mb1 h1 w1 db square-4"></div>
<div class="ml1 mb1 h1 w1 db square-3"></div>
<div class="ml.........完整代码请登录后点击上方下载按钮下载查看