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: rotate3d(0.9048270525, 0.4257792916, 0, 30deg);
  }
  19% {
    -webkit-transform: rotate3d(0.9297764859, 0.3681245527, 0, 30deg);
            transform: rotate3d(0.9297764859, 0.3681245527, 0, 30deg);
  }
  20% {
    -webkit-transform: rotate3d(0.9510565163, 0.3090169944, 0, 30deg);
            transform: rotate3d(0.9510565163, 0.3090169944, 0, 30deg);
  }
  21% {
    -webkit-transform: rotate3d(0.9685831611, 0.2486898872, 0, 30deg);
            transform: rotate3d(0.9685831611, 0.2486898872, 0, 30deg);
  }
  22% {
    -webkit-transform: rotate3d(0.9822872507, 0.1873813146, 0, 30deg);
            transform: rotate3d(0.9822872507, 0.1873813146, 0, 30deg);
  }
  23% {
    -webkit-transform: rotate3d(0.9921147013, 0.1253332336, 0, 30deg);
            transform: rotate3d(0.9921147013, 0.1253332336, 0, 30deg);
  }
  24% {
    -webkit-transform: rotate3d(0.9980267284, 0.0627905195, 0, 30deg);
            transform: rotate3d(0.9980267284, 0.0627905195, 0, 30deg);
  }
  25% {
    -webkit-transform: rotate3d(1, 0, 0, 30deg);
            transform: rotate3d(1, 0, 0, 30deg);
  }
  26% {
    -webkit-transform: rotate3d(0.9980267284, -0.0627905195, 0, 30deg);
            transform: rotate3d(0.9980267284, -0.0627905195, 0, 30deg);
  }
  27% {
    -webkit-transform: rotate3d(0.9921147013, -0.1253332336, 0, 30deg);
            transform: rotate3d(0.9921147013, -0.1253332336, 0, 30deg);
  }
  28% {
    -webkit-transform: rotate3d(0.9822872507, -0.1873813146, 0, 30deg);
            transform: rotate3d(0.9822872507, -0.1873813146, 0, 30deg);
  }
  29% {
    -webkit-transform: rotate3d(0.9685831611, -0.2486898872, 0, 30deg);
            transform: rotate3d(0.9685831611, -0.2486898872, 0, 30deg);
  }
  30% {
    -webkit-transform: rotate3d(0.9510565163, -0.3090169944, 0, 30deg);
            transform: rotate3d(0.9510565163, -0.3090169944, 0, 30deg);
  }
  31% {
    -webkit-transform: rotate3d(0.9297764859, -0.3681245527, 0, 30deg);
            transform: rotate3d(0.9297764859, -0.3681245527, 0, 30deg);
  }
  32% {
    -webkit-transform: rotate3d(0.9048270525, -0.4257792916, 0, 30deg);
            transform: rotate3d(0.9048270525, -0.4257792916, 0, 30deg);
  }
  33% {
    -webkit-transform: rotate3d(0.87630668, -0.4817536741, 0, 30deg);
            transform: rotate3d(0.87630668, -0.4817536741, 0, 30deg);
  }
  34% {
    -webkit-transform: rotate3d(0.8443279255, -0.535826795, 0, 30deg);
            transform: rotate3d(0.8443279255, -0.535826795, 0, 30deg);
  }
  35% {
    -webkit-transform: rotate3d(0.8090169944, -0.5877852523, 0, 30deg);
            transform: rotate3d(0.8090169944, -0.5877852523, 0, 30deg);
  }
  36% {
    -webkit-transform: rotate3d(0.7705132428, -0.6374239897, 0, 30deg);
            transform: rotate3d(0.7705132428, -0.6374239897, 0, 30deg);
  }
  37% {
    -webkit-transform: rotate3d(0.7289686274, -0.6845471059, 0, 30deg);
            transform: rotate3d(0.7289686274, -0.6845471059, 0, 30deg);
  }
  38% {
    -webkit-transform: rotate3d(0.6845471059, -0.7289686274, 0, 30deg);
            transform: rotate3d(0.6845471059, -0.7289686274, 0, 30deg);
  }
  39% {
    -webkit-transform: rotate3d(0.6374239897, -0.7705132428, 0, 30deg);
            transform: rotate3d(0.6374239897, -0.7705132428, 0, 30deg);
  }
  40% {
    -webkit-transform: rotate3d(0.5877852523, -0.8090169944, 0, 30deg);
            transform: rotate3d(0.5877852523, -0.8090169944, 0, 30deg);
  }
  41% {
    -webkit-transform: rotate3d(0.535826795, -0.8443279255, 0, 30deg);
            transform: rotate3d(0.535826795, -0.8443279255, 0, 30deg);
  }
  42% {
    -webkit-transform: rotate3d(0.4817536741, -0.87630668, 0, 30deg);
            transform: rotate3d(0.4817536741, -0.87630668, 0, 30deg);
  }
  43% {
    -webkit-transform: rotate3d(0.4257792916, -0.9048270525, 0, 30deg);
            transform: rotate3d(0.4257792916, -0.9048270525, 0, 30deg);
  }
  44% {
    -webkit-transform: rotate3d(0.3681245527, -0.9297764859, 0, 30deg);
            transform: rotate3d(0.3681245527, -0.9297764859, 0, 30deg);
  }
  45% {
    -webkit-transform: rotate3d(0.3090169944, -0.9510565163, 0, 30deg);
            transform: rotate3d(0.3090169944, -0.9510565163, 0, 30deg);
  }
  46% {
    -webkit-transform: rotate3d(0.2486898872, -0.9685831611, 0, 30deg);
            transform: rotate3d(0.2486898872, -0.9685831611, 0, 30deg);
  }
  47% {
    -webkit-transform: rotate3d(0.1873813146, -0.9822872507, 0, 30deg);
            transform: rotate3d(0.1873813146, -0.9822872507, 0, 30deg);
  }
  48% {
    -webkit-transform: rotate3d(0.1253332336, -0.9921147013, 0, 30deg);
            transform: rotate3d(0.1253332336, -0.9921147013, 0, 30deg);
  }
  49% {
    -webkit-transform: rotate3d(0.0627905195, -0.9980267284, 0, 30deg);
            transform: rotate3d(0.0627905195, -0.9980267284, 0, 30deg);
  }
  50% {
    -webkit-transform: rotate3d(0, -0.9999999999, 0, 30deg);
            transform: rotate3d(0, -0.9999999999, 0, 30deg);
  }
  51% {
    -webkit-transform: rotate3d(-0.0627905195, -0.9980267283, 0, 30deg);
            transform: rotate3d(-0.0627905195, -0.9980267283, 0, 30deg);
  }
  52% {
    -webkit-transform: rotate3d(-0.1253332335, -0.9921147011, 0, 30deg);
            transform: rotate3d(-0.1253332335, -0.9921147011, 0, 30deg);
  }
  53% {
    -webkit-transform: rotate3d(-0.1873813145, -0.9822872505, 0, 30deg);
            transform: rotate3d(-0.1873813145, -0.9822872505, 0, 30deg);
  }
  54% {
    -webkit-transform: rotate3d(-0.2486898871, -0.9685831607, 0, 30deg);
            transform: rotate3d(-0.2486898871, -0.9685831607, 0, 30deg);
  }
  55% {
    -webkit-transform: rotate3d(-0.3090169943, -0.9510565157, 0, 30deg);
            transform: rotate3d(-0.3090169943, -0.9510565157, 0, 30deg);
  }
  56% {
    -webkit-transform: rotate3d(-0.3681245525, -0.929776485, 0, 30deg);
            transform: rotate3d(-0.3681245525, -0.929776485, 0, 30deg);
  }
  57% {
    -webkit-transform:.........完整代码请登录后点击上方下载按钮下载查看