css实现一个爬行的蛇尾部动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：css实现一个爬行的蛇尾部动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>

  <meta charset="UTF-8">

  
<style>
html, body {
  height: 100%;
}

body {
  background: radial-gradient(ellipse at top, #ddf8fe 0%, #24b9cf 100%);
  background-repeat: no-repeat;
}

#c {
  position: relative;
  width: 100px;
  margin: 10px auto;
}

.poop:nth-child(1) {
  position: absolute;
  width: 4px;
  height: 3.6px;
  margin-left: -50px;
  margin-top: 5px;
  background-color: rgba(74, 221, 246, 0.4);
  border-radius: 100% 100% 50% 50%;
  border: 1px solid rgba(10, 179, 208, 0.4);
  animation: go 2s ease-in-out infinite;
  animation-delay: -0.08s;
}

.poop:nth-child(2) {
  position: absolute;
  width: 8px;
  height: 7.2px;
  margin-left: -50px;
  margin-top: 10px;
  background-color: rgba(74, 221, 246, 0.4);
  border-radius: 100% 100% 50% 50%;
  border: 1px solid rgba(10, 179, 208, 0.4);
  animation: go 2s ease-in-out infinite;
  animation-delay: -0.16s;
}

.poop:nth-child(3) {
  position: absolute;
  width: 12px;
  height: 10.8px;
  margin-left: -50px;
  margin-top: 15px;
  background-color: rgba(74, 221, 246, 0.4);
  border-radius: 100% 100% 50% 50%;
  border: 1px solid rgba(10, 179, 208, 0.4);
  animation: go 2s ease-in-out infinite;
  animation-delay: -0.24s;
}

.poop:nth-child(4) {
  position: absolute;
  width: 16px;
  height: 14.4px;
  margin-left: -50px;
  margin-top: 20px;
  background-color: rgba(74, 221, 246, 0.4);
  border-radius: 100% 100% 50% 50%;
  border: 1px solid rgba(10, 179, 208, 0.4);
  animation: go 2s ease-in-out infinite;
  animation-delay: -0.32s;
}

.poop:nth-child(5) {
  position: absolute;
  width: 20px;
  height: 18px;
  margin-left: -50px;
  margin-top: 25px;
  background-color: rgba(74, 221, 246, 0.4);
  border-radius: 100% 100% 50% 50%;
  border: 1px solid rgba(10, 179, 208, 0.4);
  animation: go 2s ease-in-out infinite;
  animation-delay: -0.4s;
}

.poop:nth-child(6) {
  position: absolute;
  width: 24px;
  height: 21.6px;
  margin-left: -50px;
  margin-top: 30px;
  background-color: rgba(74, 221, 246, 0.4);
  border-radius: 100% 100% 50% 50%;
  border: 1px solid rgba(10, 179, 208, 0.4);
  animation: go 2s ease-in-out infinite;
  animation-delay: -0.48s;
}

.poop:nth-child(7) {
  position: absolute;
  width: 28px;
  height: 25.2px;
  margin-left: -50px;
  margin-top: 35px;
  background-color: rgba(74, 221, 246, 0.4);
  border-radius: 100% 100% 50% 50%;
  border: 1px solid rgba(10, 179, 208, 0.4);
  animation: go 2s ease-in-out infinite;
  animation-delay: -0.56s;
}

.poop:nth-child(8) {
  position: absolute;
  width: 32px;
  height: 28.8px;
  margin-left: -50px;
  margin-top: 40px;
  background-color: rgba(74, 221, 246, 0.4);
  border-radius: 100% 100% 50% 50%;
  border: 1px solid rgba(10, 179, 208, 0.4);
  animation: go 2s ease-in-out infinite;
  animation-delay: -0.64s;
}

.poop:nth-child(9) {
  position: absolute;
  width: 36px;
  height: 32.4px;
  margin-left: -50px;
  margin-top: 45px;
  background-color: rgba(74, 221, 246, 0.4);
  border-radius: 100% 100% 50% 50%;
  border: 1px solid rgba(10, 179, 208, 0.4);
  animation: go 2s ease-in-out infinite;
  animation-delay: -0.72s;
}

.poop:nth-child(10) {
  position: absolute;
  width: 40px;
  height: 36px;
  margin-left: -50px;
  margin-top: 50px;
  background-color: rgba(74, 221, 246, 0.4);
  border-radius: 100% 100% 50% 50%;
  border: 1px solid rgba(10, 179, 208, 0.4);
  animation: go 2s ease-in-out infinite;
  animation-delay: -0.8s;
}

.poop:nth-child(11) {
  position: absolute;
  width: 44px;
  height: 39.6px;
  margin-left: -50px;
  margin-top: 55px;
  background-color: rgba(74, 221, 246, 0.4);
  border-radius: 100% 100% 50% 50%;
  border: 1px solid rgba(10, 179, 208, 0.4);
  animation: go 2s ease-in-out infinite;
  animation-delay: -0.88s;
}

.poop:nth-child(12) {
  position: absolute;
  width: 48px;
  height: 43.2px;
  margin-left: -50px;
  margin-top: 60px;
  background-color: rgba(74, 221, 246, 0.4);
  border-radius: 100% 100% 50% 50%;
  border: 1px solid rgba(10, 179, 208, 0.4);
  animation: go 2s ease-in-out infinite;
  animation-delay: -0.96s;
}

.poop:nth-child(13) {
  position: absolute;
  width: 52px;
  height: 46.8px;
  margin-left: -50px;
  margin-top: 65px;
  background-color: rgba(74, 221, 246, 0.4);
  border-radius: 100% 100% 50% 50%;
  border: 1px solid rgba(10, 179, 208, 0.4);
  animation: go 2s ease-in-out infinite;
  animation-delay: -1.04s;
}

.poop:nth-child(14) {
  position: absolute;
  width: 56px;
  height: 50.4px;
  margin-left: -50px;
  margin-top: 70px;
  background-color: rgba(74, 221, 246, 0.4);
  border-radius: 100% 100% 50% 50%;
  border: 1px solid rgba(10, 179, 208, 0.4);
  animation: go 2s ease-in-out infinite;
  animation-delay: -1.12s;
}

.poop:nth-child(15) {
  position: absolute;
  width: 60px;
  height: 54px;
  margin-left: -50px;
  margin-top: 75px;
  background-color: rgba(74, 221, 246, 0.4);
  border-radius: 100% 100% 50% 50%;
  border: 1px solid rgba(10, 179, 208, 0.4);
  animation: go 2s ease-in-out infinite;
  animation-delay: -1.2s;
}

.poop:nth-child(16) {
  position: absolute;
  width: 64px;
  height: 57.6px;
  margin-left: -50px;
  margin-top: 80px;
  background-color: rgba(74, 221, 246, 0.4);
  border-radius: 100% 100% 50% 50%;
  border: 1px solid rgba(10, 179, 208, 0.4);
  animation: go 2s ease-in-out infinite;
  animation-delay: -1.28s;
}

.poop:nth-child(17) {
  position: absolute;
  width: 68px;
  height: 61.2px;
  margin-left: -50px;
  margin-top: 85px;
  background-color: rgba(74, 221, 246, 0.4);
  border-radius: 100% 100% 50% 50%;
  border: 1px solid rgba(10, 179, 208, 0.4);
  animation: go 2s ease-in-out infinite;
  animation-delay: -1.36s;
}

.poop:nth-child(18) {
  position: absolute;
  width: 72px;
  height: 64.8px;
  margin-left: -50px;
  margin-top: 90px;
  background-color: rgba(74, 221, 246, 0.4);
  border-radius: 100% 100% 50% 50%;
  border: 1px solid rgba(10, 179, 208, 0.4);
  animation: go 2s ease-in-out infinite;
  animation-delay: -1.44s;
}

.poop:nth-child(19) {
  position: absolute;
  width: 76px;
  height: 68.4px;
  margin-left: -50px;
  margin-top: 95px;
  background-color: rgba(74, 221, 246, 0.4);
  border-radius: 100% 100% 50% 50%;
  border: 1px solid rgba(10, 179, 208, 0.4);
  animation: go 2s ease-in-out infinite;
  animation-delay: -1.52s;
}

.poop:nth-child(20) {
  position: absolute;
  width: 80px;
  height: 72px;
  margin-left: -50px;
  margin-top: 100px;
  background-color: rgba(74, 221, 246, 0.4);
  border-radius: 100% 100% 50% 50%;
  border: 1px solid rgba(10, 179, 208, 0.4);
  animation: go 2s ease-in-out infinite;
  animation-delay: -1.6s;
}

.poop:nth-child(21) {
  position: absolute;
  width: 84px;
  height: 75.6px;
  margin-left: -50px;
  margin-top: 105px;
  background-color: rgba(74, 221, 246, 0.4);
  border-radius: 100% 100% 50% 50%;
  border: 1px solid rgba(10, 179, 208, 0.4);
  animation: go 2s ease-in-out infinite;
  animation-delay: -1.68s;
}

.poop:nth-child(22) {
  position: absolute;
  width: 88px;
  height: 79.2px;
  margin-left: -50px;
  margin-top: 110px;
  background-color: rgba(74, 221, 246, 0.4);
  border-radius: 100% 100% 50% 50%;
  border: 1px solid rgba(10, 179, 208, 0.4);
  animation: go 2s ease-in-out infinite;
  animation-delay: -1.76s;
}

.poop:nth-child(23) {
  position: absolute;
  width: 92px;
  height: 82.8px;
  margin-left: -50px;
  margin-top: 115px;
  background-color: rgba(74, 221, 246, 0.4);
  border-radius: 100% 100% 50% 50%;
  border: 1px solid rgba(10, 179, 208, 0.4);
  animation: go 2s ease-in-out infinite;
  animation-delay: -1.84s;
}

.poop:nth-child(24) {
  position: absolute;
  width: 96px;
  height: 86.4px;
  margin-left: -50px;
  margin-top: 120px;
  background-color: rgba(74, 221, 246, 0.4);
  border-radius: 100% 100% 50% 50%;
  border: 1px solid rgba(10, 179, 208, 0.4);
  animation: go 2s ease-in-out infinite;
  animation-delay: -1.92s;
}

.poop:nth-child(25) {
  position: absolute;
  width: 100px;
  height: 90px;
  margin-left: -50px;
  margin-top: 125px;
  background-color: rgba(74, 221, 246, 0.4);
  border-radius: 100% 100% 50% 50%;
  border: 1px solid rgba(10, 179, 208, 0.4);
  animation: go 2s ease-in-out infinite;
  animation-delay: -2s;
}

.poop:nth-child(26) {
  position: absolute;
  width: 104px;
  height: 93.6px;
  margin-left: -50px;
  margin-top: 130px;
  background-color: rgba(74, 221, 246, 0.4);
  border-radius: 100% 100% 50% 50%;
  border: 1px solid rgba(10, 179, 208, 0.4);
  animation: go 2s ease-in-out infinite;
  animation-delay: -2.08s;
}

.poop:nth-child(27) {
  position: absolute;
  width: 108px;
  height: 97.2px;
  margin-left: -50px;
  margin-top: 135px;
  background-color: rgba(74, 221, 246, 0.4);
  border-radius: 100% 100% 50% 50%;
  border: 1px solid rgba(10, 179, 208, 0.4);
  animation: go 2s ease-in-out infinite;
  animation-delay: -2.16s;
}

.poop:nth-child(28) {
  position: absolute;
  width: 112px;
  height: 100.8px;
  margin-left: -50px;
  margin-top: 140px;
  background-color: rgba(74, 221, 246, 0.4);
  border-radius: 100% 100% 50% 50%;
  border: 1px solid rgba(10, 179, 208, 0.4);
  animation: go 2s ease-in-out infinite;
  animation-delay: -2.24s;
}

.poop:nth-child(29) {
  position: absolute;
  width: 116px;
  height: 104.4px;
  m.........完整代码请登录后点击上方下载按钮下载查看