div+css实现三维机器人荡秋千动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：div+css实现三维机器人荡秋千动画效果代码

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

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

<head>
  <meta charset="UTF-8">
  
  
  
  
<style>
*, *::before, *::after {
    padding: 0;
    margin: 0 auto;
    box-sizing: border-box;
}

body {
  background-color: #000;
  color: #fff;
  min-height: 100vh;
  display: grid;
  place-items: center;
  perspective: 800px;
  overflow: hidden;
  
  * {
    transform-style: preserve-3d;
  }
  
  --duration: 2s;
  --delay: -3s;
}

.scene {
  position: relative;
  -webkit-animation: scene 48s -28s infinite linear;
          animation: scene 48s -28s infinite linear;

  * {
    position: absolute;
  }
}

@-webkit-keyframes scene {
  to { rotate: y 1turn; }  
}

@keyframes scene {
  to { rotate: y 1turn; }  
}

.floor {
  inset: -100em;
  background-color: #333;
  background-image:
    radial-gradient(closest-side, transparent, #000),
    radial-gradient(circle at 46.3% 44.6%, #0006, transparent 2em),
    radial-gradient(circle at 53.7% 44.6%, #0006, transparent 2em),
    radial-gradient(circle at 53.7% 55.4%, #0006, transparent 2em),
    radial-gradient(circle at 46.3% 55.4%, #0006, transparent 2em),
    repeating-linear-gradient(#0003 0, #0000, #0003 1em),
    repeating-linear-gradient(90deg, #0003 0, #0000, #0003 1em);
  transform: translateY(16em) rotateX(90deg);
  
  .shadow {
    inset: 90em;
    background-image: radial-gradient(closest-side, #0003, 75%, transparent);
    -webkit-animation:
      shadowMove var(--duration) infinite ease-in-out alternate,
      shadowOpacity calc(var(--duration) * 0.5) infinite ease-in-out alternate;
            animation:
      shadowMove var(--duration) infinite ease-in-out alternate,
      shadowOpacity calc(var(--duration) * 0.5) infinite ease-in-out alternate;
  }
}

@-webkit-keyframes shadowMove {
  from { translate: -15em; }
  to { translate: 15em; }
}

@keyframes shadowMove {
  from { translate: -15em; }
  to { translate: 15em; }
}

@-webkit-keyframes shadowOpacity {
  from { opacity: 0.5; scale: 2; }
  to { opacity: 1; scale: 1; }
}

@keyframes shadowOpacity {
  from { opacity: 0.5; scale: 2; }
  to { opacity: 1; scale: 1; }
}

.swing {
  position: absolute;
  translate: 0 -12em;
}

.structure {
    left: -0.5em; top: -1.2em;
    --color: brown;
  
  .top {
    rotate: 45deg;

    --width: 1em;
    --height: 1em;
    --depth: 24em;    
  }
  
  .legs {
    translate: 0 1em var(--tz, 11em);
    
    div {
      transform-origin: top;
      rotate: var(--rz, 15deg);
      
      --width: 1em;
      --height: 30em;
      --depth: 1em;
      
      &:nth-child(2) { --rz: -15deg; }
    }
    &:nth-child(2) { --tz: -11em; }
  }

}

.moving {
  -webkit-animation: swing var(--duration) infinite ease-in-out alternate;
          animation: swing var(--duration) infinite ease-in-out alternate;
  
  .line {
    left: -0.1em; top: 0;
    width: 0.2em; height: 20em;
    background-image: linear-gradient(90deg, #fff, #777, #fff);
    transform: translateZ(var(--tz, 4em));
    
    &:nth-child(2) {
      --tz: -4em;
    }
    
    &::after {
      content: '';
      position: absolute;
      inset: 0;
      rotate: y 90deg;
      background: inherit;
    }
  }
  
  .seat {
    left: -2em; top: 20em;
    
    --width: 4em;
    --height: 1em;
    --depth: 10em;
    --color: brown;
  }
}

@-webkit-keyframes swing {
  from { rotate: 45deg; }
  to { rotate: -45deg; }
}

@keyframes swing {
  from { rotate: 45deg; }
  to { rotate: -45deg; }
}

.child {
  translate: -1.5em 19.5em;
  
  .thigh {
    left: 0.5em; top: -0.5em;
    transform: translateZ(var(--tz, 1em)) rotateY(var(--ry, -10deg));

    --width: 5em;
    --height: 1em;
    --depth: 1em;
    
    &:nth-child(2) { --tz: -1em; --ry: 10deg; }
  }
  
  .calf {
    left: 100%; top: 0;
    width: 4em; height: 1em;
    transform-origin: top left;
    -webkit-animation: calf var(--duration) var(--delay) infinite ease-in-out alternate;
            animation: calf var(--duration) var(--delay) infinite ease-in-out alternate;
    
    --width: 4em;
    --height: 1em;
    --depth: 1em;
  }

  .foot {
    left: 100%; top: 0;
    transform-origin: bottom left;
    -webkit-animation: foot var(--duration) var(--delay) infinite ease-in-out alternate;
            animation: foot var(--duration) var(--delay) infinite ease-in-out alternate;

    --width: 2em;
    --height: 1em;
    --depth: 1em;
  }
  
  .thorax {
    left: -0em; bottom: -0.5em;
    transform-origin: bottom left;
    -webkit-animation: thorax var(--duration) var(--delay) infinite ease-in-out alternate;
            animation: thorax var(--duration) var(--delay) infinite ease-in-out alternate;
    
    --width: 2em;
    --height: 6em;
    --depth: 4em;
  }
  
  .neck {
    left: 0.5em; top: -1.5em;
    transform-origin: bottom;
    -webkit-animation: head var(--duration) var(--delay) infinite ease-in-out alternate;
            animation: head var(--duration) var(--delay) infinite ease-in-out alternate;
      
    --width: 1em;
    --height: 2em;
    --depth: 1em;
  }
  
  .head {
    left: -0.5em; top: -2.5em;
    transform-origin: bottom;
    -webkit-animation: head var(--duration) var(--delay) infinite ease-in-out alternate;
            animation: head var(--duration) var(--delay) infinite ease-in-out alternate;
      
    --width: 2em;
    --height: 3em;
    --depth: 2em;
  }
  
  .arm {
    left: 0.5em; top: 1em;
    transform-origin: 50% 50% calc(var(--lr, 1) * -1.5em);
    -webkit-animation: arm var(--duration) var(--delay) infinite ease-in-out alternate;
            animation: arm var(--duration) var(--delay) infinite ease-in-out alternate;

    --width: 1em;
    --height: 1em;
    --depth: 4em;
    
    &:nth-child(9) { --lr: -1; }
  }
  .hand {
    left: 0; top: 0;
    transform-origin: 0% 50% calc(var(--lr, 1) * -1.5em);
    -webkit-animation: hand var(--duration) var(--delay) infinite ease-in-out alternate;
            animation: hand var(--duration) var(--delay) infinite ease-in-out alternate;
   
    --width: 1em;
    --height: 1em;
    --depth: 3em;
  }
}

@-webkit-keyframes calf {
  0% { rotate: 5deg; }
  100% { rotate: 85deg; }
}

@keyframes calf {
  0% { rotate: 5deg; }
  100% { rotate: 85deg; }
}
@-webkit-keyframes foot {
  0%, 30% { rotate: -45deg; }
  70%, 100% { rotate: -25deg; }
}
@keyframes foot {
  0%, 30% { rotate: -45deg; }
  70%, 100% { rotate: -25deg; }
}
@-webkit-keyframes thorax {
  0%, 20% { translate: 0.5em -0em; rotate: -60deg; }
  80%, 100% { translate: -0em 0em; rotate: 15deg; }
}
@keyframes thorax {
  0%, 20% { translate: 0.5em -0em; r.........完整代码请登录后点击上方下载按钮下载查看