div+css实现蜘蛛在网上爬行交互动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：div+css实现蜘蛛在网上爬行交互动画效果代码

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

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

<head>
    <meta charset="UTF-8">
<style>
    i {
  display: block;
}

*, *:before, *:after {
  box-sizing: border-box;
  content: "";
}

body {
  background: #101914;
  padding: 0;
  overflow: hidden;
}

div {
  width: 100vmin;
  height: 100vmin;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: 0;
  bottom: 0;
  overflow: hidden;
}

background {
  opacity: 0.75;
  filter: blur(3vmin);
}
background i {
  width: 20vmin;
  height: 20vmin;
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 0;
}
background i:nth-of-type(2) {
  background: #525500;
}
background i:nth-of-type(5) {
  background: #638870;
  transform: translate3d(18vmin, -10vmin, 0);
  width: 40vmin;
  height: 40vmin;
}
background i:nth-of-type(4) {
  background: #4C582E;
  transform: translate3d(50vmin, -5vmin, 0);
  width: 25vmin;
  height: 25vmin;
}
background i:nth-of-type(3) {
  background: #1A3233;
  transform: translate3d(60vmin, -15vmin, 0);
  width: 50vmin;
  height: 50vmin;
}
background i:nth-of-type(6) {
  background: #488800;
  transform: translate3d(80vmin, 10vmin, 0);
  width: 25vmin;
  height: 25vmin;
  box-shadow: 15vmin -5vmin 0 rgba(72, 136, 0, 0.8), 25vmin 4vmin 0 rgba(72, 136, 0, 0.9), 30vmin 11vmin 0 rgba(72, 136, 0, 0.8), 12vmin 15vmin 0 rgba(72, 136, 0, 0.9), 2vmin 9vmin 0 rgba(72, 136, 0, 0.8);
}
background i:nth-of-type(15) {
  background: #677300;
  transform: translate3d(-5vmin, 50vmin, 0);
  width: 30vmin;
  height: 30vmin;
}
background i:nth-of-type(7) {
  background: #1E1E11;
  transform: translate3d(20vmin, 30vmin, 0);
  width: 50vmin;
  height: 50vmin;
}
background i:nth-of-type(1) {
  background: #202400;
  transform: translate3d(-10vmin, 10vmin, 0);
  width: 55vmin;
  height: 55vmin;
}
background i:nth-of-type(8) {
  background: #294A2C;
  transform: translate3d(60vmin, 40vmin, 0);
  width: 40vmin;
  height: 40vmin;
}
background i:nth-of-type(9) {
  background: #488800;
  transform: translate3d(90vmin, 40vmin, 0);
  width: 25vmin;
  height: 25vmin;
  box-shadow: 17vmin -7vmin 0 rgba(72, 136, 0, 0.8), 23vmin 6vmin 0 rgba(72, 136, 0, 0.9), 32vmin 15vmin 0 rgba(72, 136, 0, 0.8), 10vmin 10vmin 0 rgba(72, 136, 0, 0.9), -5vmin 9vmin 0 rgba(72, 136, 0, 0.8);
}
background i:nth-of-type(11) {
  background: #20251A;
  transform: translate3d(-15vmin, 70vmin, 0);
  width: 40vmin;
  height: 40vmin;
}
background i:nth-of-type(12) {
  background: #032631;
  transform: translate3d(20vmin, 60vmin, 0);
  width: 30vmin;
  height: 30vmin;
  box-shadow: 20vmin 20vmin 0 rgba(3, 38, 49, 0.8);
}
background i:nth-of-type(13) {
  background: #004D50;
  transform: translate3d(60vmin, 75vmin, 0);
  width: 45vmin;
  height: 45vmin;
}
background i:nth-of-type(14) {
  background: #1F403D;
  transform: translate3d(100vmin, 70vmin, 0);
  width: 40vmin;
  height: 40vmin;
}

@keyframes shake {
  0% {
    left: 0.4vmin;
    top: 0.4vmin;
  }
  25% {
    left: -0.35vmin;
    top: -0.35vmin;
  }
  50% {
    left: 0.3vmin;
    top: 0.3vmin;
  }
  75% {
    left: -0.25vmin;
    top: -0.25vmin;
  }
  80% {
    left: 0.2vmin;
    top: 0.2vmin;
  }
  90% {
    left: -0.15vmin;
    top: -0.15vmin;
  }
  95% {
    left: 0.1vmin;
    top: 0.1vmin;
  }
}
@keyframes walk {
  20% {
    transform: scaleX(1.1) rotate(10deg);
  }
  40% {
    transform: scaleX(1);
  }
  60% {
    transform: scaleX(0.8) rotate(-10deg);
  }
  80% {
    transform: scaleX(1);
  }
}
@keyframes walk2 {
  20% {
    transform: scaleX(1.1) rotate(10deg);
  }
  40% {
    transform: scaleX(1);
  }
  60% {
    transform: scaleX(0.8) rotate(-10deg);
  }
  80% {
    transform: scaleX(1);
  }
}
web:nth-of-type(1) {
  transform: translate3d(-14.7vmin, 47.5vmin, 0) scale(0.215) rotate(-97deg);
}
web:nth-of-type(1) i, web:nth-of-type(1) i:before, web:nth-of-type(1) i:after {
  border-left: 0.6vmin solid #fff;
  border-top: 0.6vmin solid #fff;
}
web:nth-of-type(1) > i:nth-of-type(19):after {
  display: none;
}

web {
  display: block;
  transform: translate3d(4vmin, -15vmin, 0);
}
web > i, web > i:before, web > i:after {
  position: absolute;
  left: 0;.........完整代码请登录后点击上方下载按钮下载查看