战斗

下载代码

html

css

分享到微信朋友圈

html

css

body {
  margin: 0;
  height: 100vh;
  overflow: hidden;
  background-color: #FE8352;
}

#foreSVG {
  z-index: 10;
  transform: scale(1.02);
  height: 100vh;
  position: absolute;
  left: 0;
  animation-name: blur;
  animation-duration: 5s;
  animation-delay: 5s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
}

#svgBG {
  z-index: 1;
  transform: scale(1.2);
  height: 100vh;
  position: absolute;
  right: 0;
  animation-name: blur;
  animation-duration: 5s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
}

#handMain_two, #fingerOne_two, #fingerTwo_two, #manTwo, #manThree {
  visibility: hidden;
}

@keyframes blur {
  0% {
    filter: blur(0px);
  }
  33% {
    filter: blur(0px);
  }
  100% {
    filter: blur(5px);
  }
}
#Foreground {
  animation-name: moveLeft;
  animation-duration: 7s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
}

@keyframes moveLeft {
  0% {
    transform: translate(0px);
  }
  33% {
    transform: translate(0px);
  }
  100% {
    transform: translate(-50px);
  }
}
#manGroup {
  animation-name: moveRight_manGroup;
  animation-duration: 7s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
}

@keyframes moveRight_manGroup {
  0% {
    transform: translate(1026px, 231px);
  }
  33% {
    transform: translate(1026px, 231px);
  }
  100% {
    transform: translate(1046px, 231px);
  }
}
#landOne {
  animation-name: moveRight_01;
  animation-duration: 7s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
}

@keyframes moveRight_01 {
  0% {
    transform: translate(0px);
  }
  33% {
    transform: translate(0px);
  }
  100% {
    transform: translate(40px);
  }
}
#landTwo {
  animation-name: moveRight_02;
  animation-duration: 7s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
}

@keyframes moveRight_02 {
  0% {
    transform: translate(0px);
  }
  33% {
    transform: translate(0px);
  }
  100% {
    transform: translate(60px);
  }
}
#landThree {
  animation-name: moveRight_03;
  animation-duration: 7s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
}

@keyframes moveRight_03 {
  0% {
    transform: translate(0px);
  }
  33% {
    transform: translate(0px);
  }
  100% {
    transform: translate(80px);
  }
}
#clouds {
  animation-name: moveRight_Clouds;
  animation-duration: 7s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
}

@keyframes moveRight_Clouds {
  0% {
    transform: translate(368px, 126px);
  }
  33% {
    transform: translate(368px, 126px);
  }
  100% {
    transform: translate(468px, 126px);
  }
}
#sun {
  animation-name: moveRight_Sun;
  animation-duration: 7s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
}

@keyframes moveRight_Sun {
  0% {
    transform: translate(0px);
  }
  33% {
    transform: translate(0px);
  }
  100% {
    transform: translate(120px);
  }
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg