div+css实现三维场景小人荡秋千动画效果代码

代码语言:html

所属分类:三维

代码描述:div+css实现三维场景小人荡秋千动画效果代码,纯css及div代码,无js代码实现。

代码标签: div css 三维 场景 小人 秋千

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


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

<head>

  <meta charset="UTF-8">

  <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/custom/3dman.css">
  



</head>

<body>
  <div class="scene">
    <div class="cube" id="ground">
      <div class="container">
        <div class="left"></div>
        <div class="right"></div>
        <div class="top"></div>
        <div class="bottom"></div>
        <div class="front"></div>
        <div class="back"></div>
      </div>
    </div>
    <div class="bench _face">
      <div class="cube" id="bench-seat-front">
        <div class="container">
          <div class="left"></div>
          <div class="right"></div>
          <div class="top"></div>
          <div class="bottom"></div>
          <div class="front"></div>
          <div class="back"></div>
        </div>
      </div>
      <div class="cube" id="bench-seat-center">
        <div class="container">
          <div class="left"></div>
          <div class="right"></div>
          <div class="top"></div>
          <div class="bottom"></div>
          <div class="front"></div>
          <div class="back"></div>
        </div>
      </div>
      <div class="cube" id="bench-seat-back">
        <div class="container">
          <div class="left"></div>
          <div class="right"></div>
          <div class="top"></div>
          <div class="bottom"></div>
          <div class="front"></div>
          <div class="back"></div>
        </div>
      </div>
      <div class="bench-back _face">
        <div class="cube" id="bench-back-top">
          <div class="container">
            <div class="left"></div>
            <div class="right"></div>
            <div class="top"></div>
            <div class="bottom"></div>
            <div class="front"></div>
            <div class="back"></div>
          </div>
        </div>
        <div class="cube" id="bench-back-bottom">
          <div class="container">
            <div class="left"></div>
            <div class="right"></div>
            <div class="top"></div>
            <div class="bottom"></div>
            <div class="front"></div>
            <div class="back"></div>
          </div>
        </div>
        <div class="cube" id="bench-back-left">
          <div class="container">
            <div class="left"></div>
            <div class="right"></div>
            <div class="top"></div>
            <div class="bottom"></div>
            <div class="front"></div>
            <div class="back"></div>
          </div>
        </div>
        <div class="cube" id="bench-back-right">
          <div class="container">
            <div class="left"></div>
            <div class="right"></div>
            <div class="top"></div>
            <div class="bottom"></div>
            <div class="front"></div>
            <div class="back"></div>
          </div>
        </div>
      </div>
      <div class="cube" id="bench-seat-left">
        <div class="container">
          <div class="left"></div>
          <div class="right"></div>
          <div class="top"></div>
          <div class="bottom"></div>
          <div class="front"></div>
          <div class="back"></div>
        </div>
      </div>
      <div class="cube" id="bench-seat-right">
        <div class="container">
          <div class="left"></div>
          <div class="right"></div>
          <div class="top"></div>
          <div class="bottom"></div>
          <div class="front"></div>
          <div class="back"></div>
        </div>
      </div>
      <div class="cube" id="bench-leg-lf">
        <div class="container">
          <div class="left"></div>
          <div class="right"></div>
          <div class="top"></div>
          <div class="bottom"></div>
          <div class="front"></div>
          <div class="back"></div>
        </div>
      </div>
      <div class="cube" id="bench-leg-rf">
        <div class="container">
          <div class="left"></div>
          <div class="right"></div>
          <div class="top"></div>
          <div class="bottom"></div>
          <div class="front"></div>
          <div class="back"></div>
        </div>
      </div>
      <div class="cube" id="bench-leg-lb">
        <div class="container">
          <div class="left"></div>
          <div class="right"></div>
          <div class="top"></div>
          <div class="bottom"></div>
          <div class="front"></div>
          <div class="back"></div>
        </div>
      </div>
      <div class="cube" id="bench-leg-rb">
        <div class="container">
          <div class="left"></div>
          <div class="right"></div>
          <div class="top"></div>
          <div class="bottom"></div>
          <div class="front"></div>
          <div class="back"></div>
        </div>
      </div>
    </div>
    <div class="plant _face">
      <div class="cylinder" id="plant-pot">
        <div class="container"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
        </div>
      </div>
      <div class="cube" id="plant-trunk">
        <div class="container">
          <div class="left"></div>
          <div class="right"></div>
          <div class="top"></div>
          <div class="bottom"></div>
          <div class="front"></div>
          <div class="back"></div>
        </div>
      </div>
      <div class="pyramid" id="plant-bush-lower">
        <div class="container"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
        </div>
      </div>
      <div class="pyramid" id="plant-bush-upper">
        <div class="container"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
        </div>
      </div>
    </div>
    <div class="bins _face">
      <div class="bin" id="bin-1">
        <div class="cube" id="bin-1-main">
          <div class="container">
            <div class="left"></div>
            <div class="right"></div>
            <div class="top"></div>
            <div class="bottom"></div>
            <div class="front"></div>
            <div class="back"></div>
          </div>
        </div>
        <div class="cube" id="bin-1-lf">
          <div class="container">
            <div class="left"></div>
            <div class="right"></div>
            <div class="top"></div>
            <div class="bottom"></div>
            <div class="front"></div>
            <div class="back"></div>
          </div>
        </div>
        <div class="cube" id="bin-1-rf">
          <div class="container">
            <div class="left"></div>
            <div class="right"></div>
            <div class="top"></div>
            <div class="bottom"></div>
            <div class="front"></div>
            <div class="back"></div>
          </div>
        </div>
        <div class="cube" id="bin-1-lb">
          <div class="container">
            <div class="left"></div>
            <div class="right"></div>
            <div class="top"></div>
            <div class="bottom"></div>
            <div class="front"></div>
            <div class="back"></div>
          </div>
        </div>
        <div class="cube" id="bin-1-rb">
          <div class="container">
            <div class="left"></div>
            <div class="right"></div>
            <div class="top"></div>
            <div class="bottom"></div>
            <div class="front"></div>
            <div class="back"></div>
          </div>
        </div><i class="material-icons">compost</i>
      </div>
      <div class="bin" id="bin-2">
        <div class="cube" id="bin-2-main">
          <div class="container">
            <div class="left"></div>
            <div class="right"></div>
            <div class="top"></div>
            <div class="bottom"></div>
            <div class="front"></div>
            <div class="back"></div>
          </div>
        </div>
        <div class="cube" id="bin-2-lf">
          <div class="container">
            <div class="left"></div>
            <div class="right"></div>
            <div class="top"></div>
            <div class="bottom"></div>
            <div class="front"></div>
            <div class="back"></div>
          </div>
        </div>
        <div class="cube" id="bin-2-rf">
          <div class="container">
            <div class="left"></div>
            <div class="right"></div>
            <div class="top"></div>
            <div class="bottom"></div>
            <div class="front"></div>
            <div class="back"></div>
          </div>
        </div>
        <div class="cube" id="bin-2-lb">
          <div class="container">
            <div class="left"></div>
            <div class="right"></div>
            <div class="top"></div>
            <div class="bottom"></div>
            <div class="front"></div>
            <div class="back"></div>
          </div>
        </div>
        <div class="cube" id="bin-2-rb">
          <div class="container">
            <div class="left"></div>
            <div class="right"></div>
            <div class="top"></div>
            <div class="bottom"></div>
            <div class="front"></div>
            <div class="back"></div>
          </div>
        </div><i class="material-icons">recycling</i>
      </div>
      <div class="bin" id="bin-3">
        <div class="cube" id="bin-3-main">
          <div class="container">
            <div class="left"></div>
            <div class="right"></div>
            <div class="top"></div>
            <div class="bottom"></div>
            <div class="front"></div>
            <div class="back"></div>
          </div>
        </div>
        <div class="cube" id="bin-3-lf">
          <div class="container">
            <div class="left"></div>
            <div class="right"></div>
            <div class="top"></div>
            <div class="bottom"></div>
            <div class="front"></div>
            <div class="back"></div>
          </div>
        </div>
        <div class="cube" id="bin-3-rf">
          <div class="container">
            <div class="left"></div>
            <div class="right"></div>
            <div class="top"></div>
            <div class="bottom"></div>
            <div class="front"></div>
            <div class="back"></div>
          </div>
        </div>
        <div class="cube" id="bin-3-lb">
          <div class="container">
            <div class="left"></div>
            <div class="right"></div>
            <div class="top"></div>
            <div class="bottom"></div>
            <div class="front"></div>
            <div class="back"></div>
          </div>
        </div>
        <div class="cube" id="bin-3-rb">
          <div class="container">
            <div class="left"></div>
            <div class="right"></div>
            <div class="top"></div>
            <div class="bottom"></div>
            <div class="front"></div>
            <div class="back&.........完整代码请登录后点击上方下载按钮下载查看

网友评论0