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

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

代码语言：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 rg.........完整代码请登录后点击上方下载按钮下载查看