css实现圆珠串联一起蛇形向前运动动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：css实现圆珠串联一起蛇形向前运动动画效果代码

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

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

<head>

  <meta charset="UTF-8">
  

  
  
<style>
/**
* get random number.
* @param {number} min - min number.
* @param {number} max - max number.
*/
/**
* common
*/
html,
body {
  width: 100vw;
  height: 100vh;
}
body {
  background: #092745;
  position: relative;
  overflow: hidden;
  font-size: 0;
}
/*
* variable
*/
div.criterion {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
}
div.circle {
  position: inline-block;
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}
div.circle0 {
  background-color: #eb4747;
  left: 170px;
  top: -100px;
  -webkit-animation: gather-animation0 1.5s ease-in-out 0ms infinite alternate;
          animation: gather-animation0 1.5s ease-in-out 0ms infinite alternate;
}
div.circle1 {
  background-color: #eb5547;
  left: 160px;
  top: -100px;
  -webkit-animation: gather-animation1 1.5s ease-in-out 100ms infinite alternate;
          animation: gather-animation1 1.5s ease-in-out 100ms infinite alternate;
}
div.circle2 {
  background-color: #eb6347;
  left: 150px;
  top: -100px;
  -webkit-animation: gather-animation2 1.5s ease-in-out 200ms infinite alternate;
          animation: gather-animation2 1.5s ease-in-out 200ms infinite alternate;
}
div.circle3 {
  background-color: #eb7047;
  left: 140px;
  top: -100px;
  -webkit-animation: gather-animation3 1.5s ease-in-out 300ms infinite alternate;
          animation: gather-animation3 1.5s ease-in-out 300ms infinite alternate;
}
div.circle4 {
  background-color: #eb7e47;
  left: 130px;
  top: -100px;
  -webkit-animation: gather-animation4 1.5s ease-in-out 400ms infinite alternate;
          animation: gather-animation4 1.5s ease-in-out 400ms infinite alternate;
}
div.circle5 {
  background-color: #eb8b47;
  left: 120px;
  top: -100px;
  -webkit-animation: gather-animation5 1.5s ease-in-out 500ms infinite alternate;
          animation: gather-animation5 1.5s ease-in-out 500ms infinite alternate;
}
div.circle6 {
  background-color: #eb9947;
  left: 110px;
  top: -100px;
  -webkit-animation: gather-animation6 1.5s ease-in-out 600ms infinite alternate;
          animation: gather-animation6 1.5s ease-in-out 600ms infinite alternate;
}
div.circle7 {
  background-color: #eba747;
  left: 100px;
  top: -100px;
  -webkit-animation: gather-animation7 1.5s ease-in-out 700ms infinite alternate;
          animation: gather-animation7 1.5s ease-in-out 700ms infinite alternate;
}
div.circle8 {
  background-color: #ebb447;
  left: 90px;
  top: -100px;
  -webkit-animation: gather-animation8 1.5s ease-in-out 800ms infinite alternate;
          animation: gather-animation8 1.5s ease-in-out 800ms infinite alternate;
}
div.circle9 {
  background-color: #ebc247;
  left: 80px;
  top: -100px;
  -webkit-animation: gather-animation9 1.5s ease-in-out 900ms infinite alternate;
          animation: gather-animation9 1.5s ease-in-out 900ms infinite alternate;
}
div.circle10 {
  background-color: #ebcf47;
  left: 70px;
  top: -100px;
  -webkit-animation: gather-animation10 1.5s ease-in-out 1000ms infinite alternate;
          animation: gather-animation10 1.5s ease-in-out 1000ms infinite alternate;
}
div.circle11 {
  background-color: #ebdd47;
  left: 60px;
  top: -100px;
  -webkit-animation: gather-animation11 1.5s ease-in-out 1100ms infinite alternate;
          animation: gather-animation11 1.5s ease-in-out 1100ms infinite alternate;
}
div.circle12 {
  background-color: #ebeb47;
  left: 50px;
  top: -100px;
  -webkit-animation: gather-animation12 1.5s ease-in-out 1200ms infinite alternate;
          animation: gather-animation12 1.5s ease-in-out 1200ms infinite alternate;
}
div.circle13 {
  background-color: #ddeb47;
  left: 40px;
  top: -100px;
  -webkit-animation: gather-animation13 1.5s ease-in-out 1300ms infinite alternate;
          animation: gather-animation13 1.5s ease-in-out 1300ms infinite alternate;
}
div.circle14 {
  background-color: #cfeb47;
  left: 30px;
  top: -100px;
  -webkit-animation: gather-animation14 1.5s ease-in-out 1400ms infinite alternate;
          animation: gather-animation14 1.5s ease-in-out 1400ms infinite alternate;
}
div.circle15 {
  background-color: #c2eb47;
  left: 20px;
  top: -100px;
  -webkit-animation: gather-animation15 1.5s ease-in-out 1500ms infinite alternate;
          animation: gather-animation15 1.5s ease-in-out 1500ms infinite alternate;
}
div.circle16 {
  background-color: #b4eb47;
  left: 10px;
  top: -100px;
  -webkit-animation: gather-animation16 1.5s ease-in-out 1600ms infinite alternate;
          animation: gather-animation16 1.5s ease-in-out 1600ms infinite alternate;
}
div.circle17 {
  background-color: #a7eb47;
  left: 0px;
  top: -100px;
  -webkit-animation: gather-animation17 1.5s ease-in-out 1700ms infinite alternate;
          animation: gather-animation17 1.5s ease-in-out 1700ms infinite alternate;
}
div.circle18 {
  background-color: #99eb47;
  left: -10px;
  top: -100px;
  -webkit-animation: gather-animation18 1.5s ease-in-out 1800ms infinite alternate;
          animation: gather-animation18 1.5s ease-in-out 1800ms infinite alternate;
}
div.circle19 {
  background-color: #8beb47;
  left: -20px;
  top: -100px;
  -webkit-animation: gather-animation19 1.5s ease-in-out 1900ms infinite alternate;
          animation: gather-animation19 1.5s ease-in-out 1900ms infinite alternate;
}
div.circle20 {
  background-color: #7eeb47;
  left: -30px;
  top: -100px;
  -webkit-animation: gather-animation20 1.5s ease-in-out 2000ms infinite alternate;
.........完整代码请登录后点击上方下载按钮下载查看