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;
          animation: gather-animation20 1.5s ease-in-out 2000ms infinite alternate;
}
div.circle21 {
  background-color: #70eb47;
  left: -40px;
  top: -100px;
  -webkit-animation: gather-animation21 1.5s ease-in-out 2100ms infinite alternate;
          animation: gather-animation21 1.5s ease-in-out 2100ms infinite alternate;
}
div.circle22 {
  background-color: #63eb47;
  left: -50px;
  top: -100px;
  -webkit-animation: gather-animation22 1.5s ease-in-out 2200ms infinite alternate;
          animation: gather-animation22 1.5s ease-in-out 2200ms infinite alternate;
}
div.circle23 {
  background-color: #55eb47;
  left: -60px;
  top: -100px;
  -webkit-animation: gather-animation23 1.5s ease-in-out 2300ms infinite alternate;
          animation: gather-animation23 1.5s ease-in-out 2300ms infinite alternate;
}
div.circle24 {
  background-color: #47eb47;
  left: -70px;
  top: -100px;
  -webkit-animation: gather-animation24 1.5s ease-in-out 2400ms infinite alternate;
          animation: gather-animation24 1.5s ease-in-out 2400ms infinite alternate;
}
div.circle25 {
  background-color: #47eb55;
  left: -80px;
  top: -100px;
  -webkit-animation: gather-animation25 1.5s ease-in-out 2500ms infinite alternate;
          animation: gather-animation25 1.5s ease-in-out 2500ms infinite alternate;
}
div.circle26 {
  background-color: #47eb63;
  left: -90px;
  top: -100px;
  -webkit-animation: gather-animation26 1.5s ease-in-out 2600ms infinite alternate;
          animation: gather-animation26 1.5s ease-in-out 2600ms infinite alternate;
}
div.circle27 {
  background-color: #47eb70;
  left: -100px;
  top: -100px;
  -webkit-animation: gather-animation27 1.5s ease-in-out 2700ms infinite alternate;
          animation: gather-animation27 1.5s ease-in-out 2700ms infinite alternate;
}
div.circle28 {
  background-color: #47eb7e;
  left: -110px;
  top: -100px;
  -webkit-animation: gather-animation28 1.5s ease-in-out 2800ms infinite alternate;
          animation: gather-animation28 1.5s ease-in-out 2800ms infinite alternate;
}
div.circle29 {
  background-color: #47eb8b;
  left: -120px;
  top: -100px;
  -webkit-animation: gather-animation29 1.5s ease-in-out 2900ms infinite alternate;
          animation: gather-animation29 1.5s ease-in-out 2900ms infinite alternate;
}
div.circle30 {
  background-color: #47eb99;
  left: -130px;
  top: -100px;
  -webkit-animation: gather-animation30 1.5s ease-in-out 3000ms infinite alternate;
          animation: gather-animation30 1.5s ease-in-out 3000ms infinite alternate;
}
div.circle31 {
  background-color: #47eba7;
  left: -140px;
  top: -100px;
  -webkit-animation: gather-animation31 1.5s ease-in-out 3100ms infinite alternate;
          animation: gather-animation31 1.5s ease-in-out 3100ms infinite alternate;
}
div.circle32 {
  background-color: #47ebb4;
  left: -150px;
  top: -100px;
  -webkit-animation: gather-animation32 1.5s ease-in-out 3200ms infinite alternate;
          animation: gather-animation32 1.5s ease-in-out 3200ms infinite alternate;
}
div.circle33 {
  background-color: #47ebc2;
  left: -160px;
  top: -100px;
  -webkit-animation: gather-animation33 1.5s ease-in-out 3300ms infinite alternate;
          animation: gather-animation33 1.5s ease-in-out 3300ms infinite alternate;
}
div.circle34 {
  background-color: #47ebcf;
  left: -170px;
  top: -100px;
  -webkit-animation: gather-animation34 1.5s ease-in-out 3400ms infinite alternate;
          animation: gather-animation34 1.5s ease-in-out 3400ms infinite alternate;
}
div.circle35 {
  background-color: #47ebdd;
  left: -180px;
  top: -100px;
  -webkit-animation: gather-animation35 1.5s ease-in-out 3500ms infinite alternate;
          animation: gather-animation35 1.5s ease-in-out 3500ms infinite alternate;
}
div.circle36 {
  background-color: #47ebeb;
  left: 170px;
  top: 100px;
  box-shadow: 0 0 30px #47ebeb;
  -webkit-animation: gather-animation36 1.5s ease-in-out 0ms infinite alternate;
          animation: gather-animation36 1.5s ease-in-out 0ms infinite alternate;
}
div.circle37 {
  background-color: #47ddeb;
  left: 160px;
  top: 100px;
  box-shadow: 0 0 30px #47ddeb;
  -webkit-animation: gather-animation37 1.5s ease-in-out 100ms infinite alternate;
          animation: gather-animation37 1.5s ease-in-out 100ms infinite alternate;
}
div.circle38 {
  background-color: #47cfeb;
  left: 150px;
  top: 100px;
  box-shadow: 0 0 30px #47cfeb;
  -webkit-animation: gather-animation38 1.5s ease-in-out 200ms infinite alternate;
          animation: gather-animation38 1.5s ease-in-out 200ms infinite alternate;
}
div.circle39 {
  background-color: #47c2eb;
  left: 140px;
  top: 100px;
  box-shadow: 0 0 30px #47c2eb;
  -webkit-animation: gather-animation39 1.5s ease-in-out 300ms infinite alternate;
          animation: gather-animation39 1.5s ease-in-out 300ms infinite alternate;
}
div.circle40 {
  background-color: #47b4eb;
  left: 130px;
  top: 100px;
  box-shadow: 0 0 30px #47b4eb;
  -webkit-animation: gather-animation40 1.5s ease-in-out 400ms infinite alternate;
          animation: gather-animation40 1.5s ease-in-out 400ms infinite alternate;
}
div.circle41 {
  background-color: #47a7eb;
  left: 120px;
  top: 100px;
  box-shadow: 0 0 30px #47a7eb;
  -webkit-animation: gather-animation41 1.5s ease-in-out 500ms infinite alternate;
          animation: gather-animation41 1.5s ease-in-out 500ms infinite alternate;
}
div.circle42 {
  background-color: #4799eb;
  left: 110px;
  top: 100px;
  box-shadow: 0 0 30px #4799eb;
  -webkit-animation: gather-animation42 1.5s ease-in-out 600ms infinite alternate;
          animation: gather-animation42 1.5s ease-in-out 600ms infinite alternate;
}
div.circle43 {
  background-color: #478beb;
  left: 100px;
  top: 100px;
  box-shadow: 0 0 30px #478beb;
  -webkit-animation: gather-animation43 1.5s ease-in-out 700ms infinite alternate;
          animation: gather-animation43 1.5s ease-in-out 700ms infinite alternate;
}
div.circle44 {
  background-color: #477eeb;
  left: 90px;
  top: 100px;
  box-shadow: 0 0 30px #477eeb;
  -webkit-animation: gather-animation44 1.5s ease-in-out 800ms infinite alternate;
          animation: gather-animation44 1.5s ease-in-out 800ms infinite alternate;
}
div.circle45 {
  background-color: #4770eb;
  left: 80px;
  top: 100px;
  box-shadow: 0 0 30px #4770eb;
  -webkit-animation: gather-animation45 1.5s ease-in-out 900ms infinite alternate;
          animation: gather-animation45 1.5s ease-in-out 900ms infinite alternate;
}
div.circle46 {
  background-color: #4763eb;
  left: 70px;
  top: 100px;
  box-shadow: 0 0 30px #4763eb;
  -webkit-animation: gather-animation46 1.5s ease-in-out 1000ms infinite alternate;
          animation: gather-animation46 1.5s ease-in-out 1000ms infinite alternate;
}
div.circle47 {
  background-color: #4755eb;
  left: 60px;
  top: 100px;
  box-shadow: 0 0 30px #4755eb;
  -webkit-animation: gather-animation47 1.5s ease-in-out 1100ms infinite alternate;
          animation: gather-animation47 1.5s ease-in-out 1100ms infinite alternate;
}
div.circle48 {
  background-color: #4747eb;
  left: 50px;
  top: 100px;
  box-shadow: 0 0 30px #4747eb;
  -webkit-animation: gather-animation48 1.5s ease-in-out 1200ms infinite alternate;
          animation: gather-animation48 1.5s ease-in-out 1200ms infinite alternate;
}
div.circle49 {
  background-color: #5547eb;
  left: 40px;
  top: 100px;
  box-shadow: 0 0 30px #5547eb;
  -webkit-animation: gather-animation49 1.5s ease-in-out 1300ms infinite alternate;
          animation: gather-animation49 1.5s ease-in-out 1300ms infinite alternate;
}
div.circle50 {
  background-color: #6347eb;
  left: 30px;
  top: 100px;
  box-shadow: 0 0 30px #6347eb;
  -webkit-animation: gather-animation50 1.5s ease-in-out 1400ms infinite alternate;
          animation: gather-animation50 1.5s ease-in-out 1400ms infinite alternate;
}
div.circle51 {
  background-color: #7047eb;
  left: 20px;
  top: 100px;
  box-shadow: 0 0 30px #7047eb;
  -webkit-animation: gather-animation51 1.5s ease-in-out 1500ms infinite alternate;
          animation: gather-animation51 1.5s ease-in-out 1500ms infinite alternate;
}
div.circle52 {
  background-color: #7e47eb;
  left: 10px;
  top: 100px;
  box-shadow: 0 0 30px #7e47eb;
  -webkit-animation: gather-animation52 1.5s ease-in-out 1600ms infinite alternate;
          animation: gather-animation52 1.5s ease-in-out 1600ms infinite alternate;
}
div.circle53 {
  background-color: #8b47eb;
  left: 0px;
  top: 100px;
  box-shadow: 0 0 30px #8b47eb;
  -webkit-animation: gather-animation53 1.5s ease-in-out 1700ms infinite alternate;
          animation: gather-animation53 1.5s ease-in-out 1700ms infinite alternate;
}
div.circle54 {
  background-color: #9947eb;
  left: -10px;
  top: 100px;
  box-shadow: 0 0 30px #9947eb;
  -webkit-animation: gather-animation54 1.5s ease-in-out 1800ms infinite alternate;
          animation: gather-animation54 1.5s ease-in-out 1800ms infinite alternate;
}
div.circle55 {
  background-color: #a747eb;
  left: -20px;
  top: 100px;
  box-shadow: 0 0 30px #a747eb;
  -webkit-animation: gather-animation55 1.5s ease-in-out 1900ms infinite alternate;
          animation: gather-animation55 1.5s ease-in-out 1900ms infinite alternate;
}
div.circle56 {
  background-color: #b447eb;
  left: -30px;
  top: 100px;
  box-shadow: 0 0 30px #b447eb;
  -webkit-animation: gather-animation56 1.5s ease-in-out 2000ms infinite alternate;
          animation: gather-animation56 1.5s ease-in-out 2000ms infinite alternate;
}
div.circle57 {
  background-color: #c247eb;
  left: -40px;
  top: 100px;
  box-shadow: 0 0 30px #c247eb;
  -webkit-animation: gather-animation57 1.5s ease-in-out 2100ms infinite alternate;
          animation: gather-animation57 1.5s ease-in-out 2100ms infinite alternate;
}
div.circle58 {
  background-color: #cf47eb;
  left: -50px;
  top: 100px;
  box-shadow: 0 0 30px #cf47eb;
  -webkit-animation: gather-animation58 1.5s ease-in-out 2200ms infinite alternate;
          animation: gather-animation58 1.5s ease-in-out 2200ms infinite alternate;
}
div.circle59 {
  background-color: #dd47eb;
  left: -60px;
  top: 100px;
  box-shadow: 0 0 30px #dd47eb;
  -webkit-animation: gather-animation59 1.5s ease-in-out 2300ms infinite alternate;
          animation: gather-animation59 1.5s ease-in-out 2300ms infinite alternate;
}
div.circle60 {
  background-color: #eb47eb;
  left: -70px;
  top: 100px;
  box-shadow: 0 0 30px #eb47eb;
  -webkit-animation: gather-animation60 1.5s ease-in-out 2400ms infinite alternate;
          animation: gather-animation60 1.5s ease-in-out 2400ms infinite alternate;
}
div.circle61 {
  background-color: #eb47dd;
  left: -80px;
  top: 100px;
  box-shadow: 0 0 30px #eb47dd;
  -webkit-animation: gather-animation61 1.5s ease-in-out 2500ms infinite alternate;
          animation: gather-animation61 1.5s ease-in-out 2500ms infinite alternate;
}
div.circle62 {
  background-color: #eb47cf;
  left: -90px;
  top: 100px;
  box-shadow: 0 0 30px #eb47cf;
  -webkit-animation: gather-animation62 1.5s ease-in-out 2600ms infinite alternate;
          animation: gather-animation62 1.5s ease-in-out 2600ms infinite alternate;
}
div.circle63 {
  background-color: #eb47c2;
  left: -100px;
  top: 100px;
  box-shadow: 0.........完整代码请登录后点击上方下载按钮下载查看