CSS3蠕虫运动 - 踏得网

参考链接：http://codepen.io/jllodra/pen/nldsu

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2437
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@-webkit-keyframes a {
  0% {
    margin-top: -80px;
    margin-left: 0px;
  }
  33% {
    margin-top: 20px;
    margin-left: 0px;
  }
  66% {
    margin-top: -80px;
    margin-left: 0px;
  }
  100% {
    margin-top: 20px;
    margin-left: 0px;
  }
}
@keyframes a {
  0% {
    margin-top: -80px;
    margin-left: 0px;
  }
  33% {
    margin-top: 20px;
    margin-left: 0px;
  }
  66% {
    margin-top: -80px;
    margin-left: 0px;
  }
  100% {
    margin-top: 20px;
    margin-left: 0px;
  }
}
.oval0 {
  position: absolute;
  width: 250px;
  height: 400px;
  top: 0px;
  left: 40%;
  background-color: rgba(186, 166, 158, 0.5);
  -webkit-animation-name: a;
  animation-name: a;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
  -webkit-animation-play-state: running;
  animation-play-state: running;
  -webkit-animation-fill-mode: backwards;
  animation-fill-mode: backwards;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
  z-index: 20;
  border-radius: 50%;
  -webkit-box-shadow: 0px 4px 10px 1px #333;
  box-shadow: 0px 4px 10px 1px #333;
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-transform: scale(0) scaleY(0.3);
  -ms-transform: scale(0) scaleY(0.3);
  transform: scale(0) scaleY(0.3);
}

.oval1 {
  position: absolute;
  width: 250px;
  height: 400px;
  top: 5px;
  left: 40%;
  background-color: rgba(175, 152, 143, 0.5);
  -webkit-animation-name: a;
  animation-name: a;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
  -webkit-animation-play-state: running;
  animation-play-state: running;
  -webkit-animation-fill-mode: backwards;
  animation-fill-mode: backwards;
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
  z-index: 19;
  border-radius: 50%;
  -webkit-box-shadow: 0px 4px 10px 1px #333;
  box-shadow: 0px 4px 10px 1px #333;
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-transform: scale(0.15643) scaleY(0.3);
  -ms-transform: scale(0.15643) scaleY(0.3);
  transform: scale(0.15643) scaleY(0.3);
}

.oval2 {
  position: absolute;
  width: 250px;
  height: 400px;
  top: 10px;
  left: 40%;
  background-color: rgba(165, 139, 128, 0.5);
  -webkit-animation-name: a;
  animation-name: a;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
  -webkit-animation-play-state: running;
  animation-play-state: running;
  -webkit-animation-fill-mode: backwards;
  animation-fill-mode: backwards;
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
  z-index: 18;
  border-radius: 50%;
  -webkit-box-shadow: 0px 4px 10px 1px #333;
  box-shadow: 0px 4px 10px 1px #333;
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-transform: scale(0.30902) scaleY(0.3);
  -ms-transform: scale(0.30902) scaleY(0.3);
  transform: scale(0.30902) scaleY(0.3);
}

.oval3 {
  position: absolute;
  width: 250px;
  height: 400px;
  top: 15px;
  left: 40%;
  background-color: rgba(154, 125, 113, 0.5);
  -webkit-animation-name: a;
  animation-name: a;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
  -webkit-animation-play-state: running;
  animation-play-state: running;
  -webkit-animation-fill-mode: backwards;
  animation-fill-mode: backwards;
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
  z-index: 17;
  border-radius: 50%;
  -webkit-box-shadow: 0px 4px 10px 1px #333;
  box-shadow: 0px 4px 10px 1px #333;
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-transform: scale(0.45399) scaleY(0.3);
  -ms-transform: scale(0.45399) scaleY(0.3);
  transform: scale(0.45399) scaleY(0.3);
}

.oval4 {
  position: absolute;
  width: 250px;
  height: 400px;
  top: 20px;
  left: 40%;
  background-color: rgba(141, 112, 101, 0.5);
  -webkit-animation-name: a;
  animation-name: a;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
  -webkit-animation-play-state: running;
  animation-play-state: running;
  -webkit-animation-fill-mode: backwards;
  animation-fill-mode: backwards;
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
  z-index: 16;
  border-radius: 50%;
  -webkit-box-shadow: 0px 4px 10px 1px #333;
  box-shadow: 0px 4px 10px 1px #333;
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-transform: scale(0.58779) scaleY(0.3);
  -ms-transform: scale(0.58779) scaleY(0.3);
  transform: scale(0.58779) scaleY(0.3);
}

.oval5 {
  position: absolute;
  width: 250px;
  height: 400px;
  top: 25px;
  left: 40%;
  background-color: rgba(127, 100, 90, 0.5);
  -webkit-animation-name: a;
  animation-name: a;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
  -webkit-animation-play-state: running;
  animation-play-state: running;
  -webkit-animation-fill-mode: backwards;
  animation-fill-mode: backwards;
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
  z-index: 15;
  border-radius: 50%;
  -webkit-box-shadow: 0px 4px 10px 1px #333;
  box-shadow: 0px 4px 10px 1px #333;
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-transform: scale(0.70711) scaleY(0.3);
  -ms-transform: scale(0.70711) scaleY(0.3);
  transform: scale(0.70711) scaleY(0.3);
}

.oval6 {
  position: absolute;
  width: 250px;
  height: 400px;
  top: 30px;
  left: 40%;
  background-color: rgba(112, 89, 79, 0.5);
  -webkit-animation-name: a;
  animation-name: a;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
  -webkit-animation-play-state: running;
  animation-play-state: running;
  -webkit-animation-fill-mode: backwards;
  animation-fill-mode: backwards;
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
  z-index: 14;
  border-radius: 50%;
  -webkit-box-shadow: 0px 4px 10px 1px #333;
  box-shadow: 0px 4px 10px 1px #333;
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-transform: scale(0.80902) scaleY(0.3);
  -ms-transform: scale(0.80902) scaleY(0.3);
  transform: scale(0.80902) scaleY(0.3);
}

.oval7 {
  position: absolute;
  width: 250px;
  height: 400px;
  top: 35px;
  left: 40%;
  background-color: rgba(97, 77, 69, 0.5);
  -webkit-animation-name: a;
  animation-name: a;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
  -webkit-animation-play-state: running;
  animation-play-state: running;
  -webkit-animation-fill-mode: backwards;
  animation-fill-mode: backwards;
  -webkit-animation-delay: 0.7s;
  animation-delay: 0.7s;
  z-index: 13;
  border-radius: 50%;
  -webkit-box-shadow: 0px 4px 10px 1px #333;
  box-shadow: 0px 4px 10px 1px #333;
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-transform: scale(0.89101) scaleY(0.3);
  -ms-transform: scale(0.89101) scaleY(0.3);
  transform: scale(0.89101) scaleY(0.3);
}

.oval8 {
  position: absolute;
  width: 250px;
  height: 400px;
  top: 40px;
  left: 40%;
  background-color: rgba(82, 65, 58, 0.5);
  -webkit-animation-name: a;
  animation-name: a;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
  -webkit-animation-play-state: running;
  animation-play-state: running;
  -webkit-animation-fill-mode: backwards;
  animation-fill-mode: backwards;
  -webkit-animation-delay: 0.8s;
  animation-delay: 0.8s;
  z-index: 12;
  border-radius: 50%;
  -webkit-box-shadow: 0px 4px 10px 1px #333;
  box-shadow: 0px 4px 10px 1px #333;
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-transform: scale(0.95106) scaleY(0.3);
  -ms-transform: scale(0.95106) scaleY(0.3);
  transform: scale(0.95106) scaleY(0.3);
}

.oval9 {
  position: absolute;
  width: 250px;
  height: 400px;
  top: 45px;
  left: 40%;
  background-color: rgba(67, 53, 48, 0.5);
  -webkit-animation-name: a;
  animation-name: a;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
  -webkit-animation-play-state: running;
  animation-play-state: running;
  -webkit-animation-fill-mode: backwards;
  animation-fill-mode: backwards;
  -webkit-animation-delay: 0.9s;
  animation-delay: 0.9s;
  z-index: 11;
  border-radius: 50%;
  -webkit-box-shadow: 0px 4px 10px 1px #333;
  box-shadow: 0px 4px 10px 1px #333;
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-transform: scale(0.98769) scaleY(0.3);
  -ms-transform: scale(0.98769) scaleY(0.3);
  transform: scale(0.98769) scaleY(0.3);
}

.oval10 {
  position: absolute;
  width: 250px;
  height: 400px;
  top: 50px;
  left: 40%;
  background-color: rgba(52, 41, 37, 0.5);
  -webkit-animation-name: a;
  animation-name: a;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
  -webkit-animation-play-state: running;
  animation-play-state: running;
  -webkit-animation-fill-mode: backwards;
  animation-fill-mode: backwards;
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
  z-index: 10;
  border-radius: 50%;
  -webkit-box-shadow: 0px 4px 10px 1px #333;
  box-shadow: 0px 4px 10px 1px #333;
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-transform: scale(1) scaleY(0.3);
  -ms-transform: scale(1) scaleY(0.3);
  transform: scale(1) scaleY(0.3);
}

.oval11 {
  position: absolute;
  width: 250px;
  height: 400px;
  top: 55px;
  left: 40%;
  background-color: rgba(37, 29, 26, 0.5);
  -webkit-animation-name: a;
  animation-name: a;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
  -webkit-animation-play-state: running;
  animation-play-state: running;
  -webkit-animation-fill-mode: backwards;
  animation-fill-mode: backwards;
  -webkit-animation-delay: 1.1s;
  animation-delay: 1.1s;
  z-index: 9;
  border-radius: 50%;
  -webkit-box-shadow: 0px 4px 10px 1px #333;
  box-shadow: 0px 4px 10px 1px #333;
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-transform: scale(0.98769) scaleY(0.3);
  -ms-transform: scale(0.98769) scaleY(0.3);
  transform: scale(0.98769) scaleY(0.3);
}

.oval12 {
  position: absolute;
  width: 250px;
  height: 400px;
  top: 60px;
  left: 40%;
  background-color: rgba(22, 18, 16, 0.5);
  -webkit-animation-name: a;
  animation-name: a;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
  -webkit-animation-play-state: running;
  animation-play-state: running;
  -webkit-animation-fill-mode: backwards;
  animation-fill-mode: backwards;
  -webkit-animation-delay: 1.2s;
  animation-delay: 1.2s;
  z-index: 8;
  border-radius: 50%;
  -webkit-box-shadow: 0px 4px 10px 1px #333;
  box-shadow: 0px 4px 10px 1px #333;
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-transform: scale(0.95106) scaleY(0.3);
  -ms-transform: scale(0.95106) scaleY(0.3);
  transform: scale(0.95106) scaleY(0.3);
}

.oval13 {
  position: absolute;
  width: 250px;
  height: 400px;
  top: 65px;
  left: 40%;
  background-color: rgba(7, 6, 5, 0.5);
  -webkit-animation-name: a;
  animation-name: a;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
  -webkit-animation-play-state: running;
  animation-play-state: running;
  -webkit-animation-fill-mode: backwards;
  animation-fill-mode: backwards;
  -webkit-animation-delay: 1.3s;
  animation-delay: 1.3s;
  z-index: 7;
  border-radius: 50%;
  -webkit-box-shadow: 0px 4px 10px 1px #333;
  box-shadow: 0px 4px 10px 1px #333;
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-transform: scale(0.89101) scaleY(0.3);
  -ms-transform: scale(0.89101) scaleY(0.3);
  transform: scale(0.89101) scaleY(0.3);
}

.oval14 {
  position: absolute;
  width: 250px;
  height: 400px;
  top: 70px;
  left: 40%;
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-animation-name: a;
  animation-name: a;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
  -webkit-animation-play-state: running;
  animation-play-state: running;
  -webkit-animation-fill-mode: backwards;
  animation-fill-mode: backwards;
  -webkit-animation-delay: 1.4s;
  animation-delay: 1.4s;
  z-index: 6;
  border-radius: 50%;
  -webkit-box-shadow: 0px 4px 10px 1px #333;
  box-shadow: 0px 4px 10px 1px #333;
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-transform: scale(0.80902) scaleY(0.3);
  -ms-transform: scale(0.80902) scaleY(0.3);
  transform: scale(0.80902) scaleY(0.3);
}

.oval15 {
  position: absolute;
  width: 250px;
  height: 400px;
  top: 75px;
  left: 40%;
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-animation-name: a;
  animation-name: a;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
  -webkit-animation-play-state: running;
  animation-play-state: running;
  -webkit-animation-fill-mode: backwards;
  animation-fill-mode: backwards;
  -webkit-animation-delay: 1.5s;
  animation-delay: 1.5s;
  z-index: 5;
  border-radius: 50%;
  -webkit-box-shadow: 0px 4px 10px 1px #333;
  box-shadow: 0px 4px 10px 1px #333;
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-transform: scale(0.70711) scaleY(0.3);
  -ms-transform: scale(0.70711) scaleY(0.3);
  transform: scale(0.70711) scaleY(0.3);
}

.oval16 {
  position: absolute;
  width: 250px;
  height: 400px;
  top: 80px;
  left: 40%;
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-animation-name: a;
  animation-name: a;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
  -webkit-animation-play-state: running;
  animation-play-state: running;
  -webkit-animation-fill-mode: backwards;
  animation-fill-mode: backwards;
  -webkit-animation-delay: 1.6s;
  animation-delay: 1.6s;
  z-index: 4;
  border-radius: 50%;
  -webkit-box-shadow: 0px 4px 10px 1px #333;
  box-shadow: 0px 4px 10px 1px #333;
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-transform: scale(0.58779) scaleY(0.3);
  -ms-transform: scale(0.58779) scaleY(0.3);
  transform: scale(0.58779) scaleY(0.3);
}

.oval17 {
  position: absolute;
  width: 250px;
  height: 400px;
  top: 85px;
  left: 40%;
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-animation-name: a;
  animation-name: a;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
  -webkit-animation-play-state: running;
  animation-play-state: running;
  -webkit-animation-fill-mode: backwards;
  animation-fill-mode: backwards;
  -webkit-animation-delay: 1.7s;
  animation-delay: 1.7s;
  z-index: 3;
  border-radius: 50%;
  -webkit-box-shadow: 0px 4px 10px 1px #333;
  box-shadow: 0px 4px 10px 1px #333;
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-transform: scale(0.45399) scaleY(0.3);
  -ms-transform: scale(0.45399) scaleY(0.3);
  transform: scale(0.45399) scaleY(0.3);
}

.oval18 {
  position: absolute;
  width: 250px;
  height: 400px;
  top: 90px;
  left: 40%;
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-animation-name: a;
  animation-name: a;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
  -webkit-animation-play-state: running;
  animation-play-state: running;
  -webkit-animation-fill-mode: backwards;
  animation-fill-mode: backwards;
  -webkit-animation-delay: 1.8s;
  animation-delay: 1.8s;
  z-index: 2;
  border-radius: 50%;
  -webkit-box-shadow: 0px 4px 10px 1px #333;
  box-shadow: 0px 4px 10px 1px #333;
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-transform: scale(0.30902) scaleY(0.3);
  -ms-transform: scale(0.30902) scaleY(0.3);
  transform: scale(0.30902) scaleY(0.3);
}

.oval19 {
  position: absolute;
  width: 250px;
  height: 400px;
  top: 95px;
  left: 40%;
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-animation-name: a;
  animation-name: a;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
  -webkit-animation-play-state: running;
  animation-play-state: running;
  -webkit-animation-fill-mode: backwards;
  animation-fill-mode: backwards;
  -webkit-animation-delay: 1.9s;
  animation-delay: 1.9s;
  z-index: 1;
  border-radius: 50%;
  -webkit-box-shadow: 0px 4px 10px 1px #333;
  box-shadow: 0px 4px 10px 1px #333;
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-transform: scale(0.15643) scaleY(0.3);
  -ms-transform: scale(0.15643) scaleY(0.3);
  transform: scale(0.15643) scaleY(0.3);
}

.oval20 {
  position: absolute;
  width: 250px;
  height: 400px;
  top: 100px;
  left: 40%;
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-animation-name: a;
  animation-name: a;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
  -webkit-animation-play-state: running;
  animation-play-state: running;
  -webkit-animation-fill-mode: backwards;
  animation-fill-mode: backwards;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
  z-index: 0;
  border-radius: 50%;
  -webkit-box-shadow: 0px 4px 10px 1px #333;
  box-shadow: 0px 4px 10px 1px #333;
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-transform: scale(0.0) scaleY(0.3);
  -ms-transform: scale(0.0) scaleY(0.3);
  transform: scale(0.0) scaleY(0.3);
}

html {
  height: 100%;
  background: #f1e767;
  background: -webkit-gradient(left top, left bottom, color-stop(0%, #f1e767), color-stop(100%, #feb645));
  background: -webkit-linear-gradient(top, #f1e767 0%, #feb645 100%);
  background: -webkit-gradient(linear, left top, left bottom, from(#f1e767), to(#feb645));
  background: linear-gradient(to bottom, #f1e767 0%, #feb645 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1e767', endColorstr='#feb645', GradientType=0 );
}

HTML

参考链接：http://codepen.io/jllodra/pen/nldsu

编辑器支持Emmet

快捷键

参考链接：http://codepen.io/jllodra/pen/nldsu

SVG path + CSS3蚯蚓蠕动动画

运用CSS3混合模式特性实现的幻灯片动画特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：