div+css实现数字提线悬挂视觉差异动画效果代码-html代码-BFW代码库

div+css实现数字提线悬挂视觉差异动画效果代码

代码语言：html

代码描述：div+css实现数字提线悬挂视觉差异动画效果代码，数字由悬挂的方块通过一定的角度组成一组数字显示出来。

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

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

<head>
  <meta charset="UTF-8">
  


  
  
<style>
body {
  display: grid;
  place-content: center;
  min-height: 100dvh;
  overflow: hidden;
}
body .left,
body .right {
  z-index: 1;
  position: fixed;
  top: 0;
  bottom: 0;
  width: 30%;
}
body .left {
  left: 0;
}
body .left:hover~#stage {
  transform: rotateY(20deg);
}
body .right {
  right: 0;
}
body .right:hover~#stage {
  transform: rotateY(-20deg);
}
body #stage {
  perspective: 1000px;
  transform-style: preserve-3d;
  width: 800px;
  height: 600px;
  transition: transform 1.5s;
  -webkit-animation: 2.5s initial_in;
          animation: 2.5s initial_in;
}
body #stage .piece {
  --rotation: 0deg;
}
body #stage .piece:not(.seven_vertical),
body #stage .piece.seven_vertical .shape {
  position: absolute;
  background: #d8334a;
  border-radius: 100px;
  box-shadow: inset 10px 10px 10px -10px rgba(255,204,204,0.533), inset -10px -10px 10px -10px rgba(68,0,0,0.533);
}
body #stage .piece.seven_vertical .shape {
  width: 100%;
  height: 100%;
}
body #stage .piece:before,
body #stage .piece.seven_vertical:after {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  width: 1px;
  height: 100vh;
  background: rgba(0,0,0,0.133);
}
body #stage .seven_vertical {
  width: 20px;
  height: 160px;
  transform: translate3d(208px, 280px, 116px);
}
body #stage .seven_vertical:before {
  left: 33px;
  bottom: calc(100% - 5px);
}
body #stage .seven_vertical.seven_vertical:after {
  left: -20px;
  bottom: 27px;
}
body #stage .seven_vertical .shape {
  transform: rotateZ(20deg);
}
body #stage .seven_top {
  width: 120px;
  height: 24px;
  transform: translate3d(120px, 121px, 50px) rotateY(20deg);
}
body #stage .seven_middle {
  width: 68px;
  height: 14px;
  transform: translate3d(241px, 174px, 401px) rotateY(-20deg);
}
body #stage .five_top {
  width: 143px;
  height: 23px;
  transform: translate3d(272px, 78px, 6px) rotateY(40deg);
}
body #stage .five_top_vertical {
  width: 19px;
  height: 89px;
  transform: translate3d(298px, 85px, 131px) rotateY(0deg);
}
body #stage .five_middle {
  width: 90px;
  height: 18px;
  transform: translate3d(307px, 152px, 206px) rotateY(10deg);
}
body #stage .five_bottom {
  width: 128px;
  height: 21px;
  transform: translate3d(277px, 230px, 69px) rotateY(-30deg);
}
body #stage .five_bottom_vertical {
  width: 26px;
  height: 114px;
  transform: translate3d(370px, 160px, -186px) rotateY(5deg);
}
body #stage .first_zero_top {
  width: 120px;
  height: 24px;
  transform: translate3d(434px, 109px, 50px) rotateY(-10deg);
}
body #stage .first_zero_left {
  width: 23px;
  height: 192px;
  tran.........完整代码请登录后点击上方下载按钮下载查看