css实现文字字母三维立体原地摇摆动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：css实现文字字母三维立体原地摇摆动画效果代码

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

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

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

  
  
<style>


body {
  display: grid;
  place-items: center;
  height: 100vh;
  background: #323133;
  font-family: "Quicksand", sans-serif;
  font-weight: 700;
  -webkit-perspective: 60rem;
          perspective: 60rem;
  -webkit-perspective-origin: 50% 50%;
          perspective-origin: 50% 50%;
  overflow: hidden;
}
body #user-button {
  --user-button-background: #434A54;
  --user-button-text:white;
}
body .text {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
body .text > div {
  display: inline-block;
  position: relative;
  font-size: 48vmin;
  color: transparent;
  -webkit-transform-origin: center center;
          transform-origin: center center;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-animation: float 4s infinite;
          animation: float 4s infinite;
}
body .text > div:nth-child(1) {
  -webkit-animation-delay: -1.5s;
          animation-delay: -1.5s;
}
body .text > div:nth-child(2) {
  -webkit-animation-delay: -1s;
          animation-delay: -1s;
}
body .text > div:nth-child(3) {
  -webkit-animation-delay: -0.5s;
          animation-delay: -0.5s;
}
body .text > div:nth-child(4) {
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}
body .text > div > div {
  position: absolute;
  top: 0;
  left: 0;
  color: white;
  text-shadow: 0 0 1px white;
}
body .text > div > div:not(:nth-child(n+3)), body .text > div > div:not(:nth-last-child(n+3)) {
  color: #ed5565;
  text-shadow: 0 0 1px #ed5565;
}
body .text > div > div:nth-child(1) {
  -webkit-transform: translateZ(-3.84vmin);
          transform: translateZ(-3.84vmin);
}
body .text > div > div:nth-child(2) {
  -webkit-transform: translateZ(-2.88vmin);
          transform: translateZ(-2.88vmin);
}
body .text > div > div:nth-child(3) {
  -webkit-transform: translateZ(-1.92vmin);
          transform: translateZ(-1.92vmin);
}
body .text > div > div:nth-child(4) {
  -webkit-transform: translateZ(-0.96vmin);
          transform: translateZ(-0.96vmin);
}
body .text > div > div:nth-child(5) {
  -webkit-transform: translateZ(0vmin);
          transform: translateZ(0vmin);
}
body .text > div > div:nth-child(6) {
  -webkit-transform: translateZ(0.96vmin);
          transform: translateZ(0.96vmin);
}
body .text > div > div:nth-child(7) {
  -webkit-transform: translateZ(1.92vmin);
          transform: translateZ(1.92vmin);
}
body .text > div > div:nth-child(8) {
  -webkit-transform: translateZ(2.88vmin);
          transform: translateZ(2.88vmin);
}
body .text > div > div:nth-child(9) {
  -webkit-transform: translateZ(3.84vmin);
          transform: translateZ(3.84vmin);
}
body .text > div > div:nth-child(10) {
  -webkit-transform: translateZ(4.8vmin);
          transform: translateZ(4.8vmin);
}

@-webkit-keyframes float {
  0% {
    -webkit-transform: rotate3d(0, 1, 0, 30deg);
            transform: rotate3d(0, 1, 0, 30deg);
  }
  1% {
    -webkit-transform: rotate3d(0.0627905195, 0.9980267284, 0, 30deg);
            transform: rotate3d(0.0627905195, 0.9980267284, 0, 30deg);
  }
  2% {
    -webkit-transform: rotate3d(0.1253332336, 0.9921147013, 0, 30deg);
            transform: rotate3d(0.1253332336, 0.9921147013, 0, 30deg);
  }
  3% {
    -webkit-transform: rotate3d(0.1873813146, 0.9822872507, 0, 30deg);
            transform: rotate3d(0.1873813146, 0.9822872507, 0, 30deg);
  }
  4% {
    -webkit-transform: rotate3d(0.2486898872, 0.9685831611, 0, 30deg);
            transform: rotate3d(0.2486898872, 0.9685831611, 0, 30deg);
  }
  5% {
    -webkit-transform: rotate3d(0.3090169944, 0.9510565163, 0, 30deg);
            transform: rotate3d(0.3090169944, 0.9510565163, 0, 30deg);
  }
  6% {
    -webkit-transform: rotate3d(0.3681245527, 0.9297764859, 0, 30deg);
            transform: rotate3d(0.3681245527, 0.9297764859, 0, 30deg);
  }
  7% {
    -webkit-transform: rotate3d(0.4257792916, 0.9048270525, 0, 30deg);
            transform: rotate3d(0.4257792916, 0.9048270525, 0, 30deg);
  }
  8% {
    -webkit-transform: rotate3d(0.4817536741, 0.87630668, 0, 30deg);
            transform: rotate3d(0.4817536741, 0.87630668, 0, 30deg);
  }
  9% {
    -webkit-transform: rotate3d(0.535826795, 0.8443279255, 0, 30deg);
            transform: rotate3d(0.535826795, 0.8443279255, 0, 30deg);
  }
  10% {
    -webkit-transform: rotate3d(0.5877852523, 0.8090169944, 0, 30deg);
            transform: rotate3d(0.5877852523, 0.8090169944, 0, 30deg);
  }
  11% {
    -webkit-transform: rotate3d(0.6374239897, 0.7705132428, 0, 30deg);
            transform: rotate3d(0.6374239897, 0.7705132428, 0, 30deg);
  }
  12% {
    -webkit-transform: rotate3d(0.6845471059, 0.7289686274, 0, 30deg);
            transform: rotate3d(0.6845471059, 0.7289686274, 0, 30deg);
  }
  13% {
    -webkit-transform: rotate3d(0.7289686274, 0.6845471059, 0, 30deg);
            transform: rotate3d(0.7289686274, 0.6845471059, 0, 30deg);
  }
  14% {
    -webkit-transform: rotate3d(0.7705132428, 0.6374239897, 0, 30deg);
            transform: rotate3d(0.7705132428, 0.6374239897, 0, 30deg);
  }
  15% {
    -webkit-transform: rotate3d(0.8090169944, 0.5877852523, 0, 30deg);
            transform: rotate3d(0.8090169944, 0.5877852523, 0, 30deg);
  }
  16% {
    -webkit-transform: rotate3d(0.8443279255, 0.535826795, 0, 30deg);
            transform: rotate3d(0.8443279255, 0.535826795, 0, 30deg);
  }
  17% {
    -webkit-transform: rotate3d(0.87630668, 0.4817536741, 0, 30deg);
            transform: rotate3d(0.87630668, 0.4817536741, 0, 30deg);
  }
  18% {
    -webkit-transform: rotate3d(0.9048270525, 0.4257792916, 0, 30deg);
            transform: rotate3.........完整代码请登录后点击上方下载按钮下载查看