div+css实现三维环形文字旋转动画效果代码-html代码-BFW代码库

div+css实现三维环形文字旋转动画效果代码

代码语言：html

所属分类：动画

代码描述：div+css实现三维环形文字旋转动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
        body {
          background-color: #000;
          color: #fff;
          min-height: 100vh;
          display: grid;
          place-items: center;
          perspective: 500px;
          perspective-origin: 50% calc(50% - 150px);
        }
        
        .scene {
          position: relative;
          transform-style: preserve-3d;
        }
        
        .banner {
          display: flex;
          transform-style: preserve-3d;
          -webkit-animation: rotate 24s infinite linear;
                  animation: rotate 24s infinite linear;
        }
        
        @-webkit-keyframes rotate {
          to {
            transform: rotateY(-360deg);
          }
        }
        
        @keyframes rotate {
          to {
            transform: rotateY(-360deg);
          }
        }
        .panel {
          position: absolute;
          transform: translate(-50%, -50%) rotateY(var(--angle)) translateZ(190px);
          width: 50px;
          height: 120px;
          overflow: hidden;
        }
        
        .panel::before {
          position: absolute;
          left: var(--left);
          content: "Hello World, it's a nice day!";
          font-size: 96px;
          width: -webkit-max-content;
          width: -moz-max-content;
          width: max-content;
          color: hsl(var(--hue), 75%, 75%);
        }
        
        .panel:nth-child(1) {
          --left: 0px;
          --hue: 0;
          --angle: 0deg;
        }
        
        .panel:nth-child(2) {
          --left: -50px;
          --hue: 15;
          --angle: 15deg;
        }
        
        .panel:nth-child(3) {
          --left: -100px;
          --hue: 30;
          --angle: 30deg;
        }
        
        .panel:nth-child(4) {
          --left: -150px;
          --hue: 45;
          --angle: 45deg;
        }
        
        .panel:nth-child(5) {
          --left: -200px;
          --hue: 60;
          --angle: 60deg;
        }
        
        .panel:nth-child(6) {
          --left: -250px;
          --hue: 75;
          --angle: 75deg;
        }
        
        .panel:nth-child(7) {
          --left: -300px;
          --hue: 90;
          --angle: 90deg;
        }
        
        .panel:nth-child(8) {
          --left: -350px;
          --hue: 105;
          --angle: 105deg;
        }
        
        .panel:nth-child(9) {
          --left: -400px;
          --hue: 120;
          --angle: 120deg;
        }
        
        .panel:nth-child(10) {
          --left: -450px;
          --hue: 135;
          --angle: 135deg;
        }
        
        .panel:nth-child(11) {
          --left: -500px;
          --hue: 150;
          --angle: 150deg;
        }
        
        .panel:nth-child(12) {
          --left: -550px;
          --hue: 165;
          --angle: 165deg;
        }
        
        .panel:nth-child(13) {
          --left: -600px;
          --hue: 180;
          --angle: 180deg;
        }
        
        .panel:nth-child(14) {
          --left: -650px;
          --hue: 195;
 .........完整代码请登录后点击上方下载按钮下载查看