2022年2月22双二节日快乐文字旋转动画效果代码-html代码-BFW代码库

2022年2月22双二节日快乐文字旋转动画效果代码

代码语言：html

所属分类：动画

代码描述：2022年2月22双二节日快乐文字旋转动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
        :root {
          --duration: 2s;
        }
        
        body {
          background: #002;
          display: flex;
          flex-direction: column;
          min-height: 100vh;
          justify-content: center;
          align-items: center;
          font-weight: bold;
          perspective: 800px;
          overflow: hidden;
          perspective-origin: 50% 60%;
        }
        
        .string {
          color: #f09;
          display: flex;
          animation: spin var(--duration) ease infinite;
          transform-style: preserve-3d;
          font-size: 10vw;
          text-shadow: 0 0 1em, 0 0 0.1em #fff9;
        }
        
        .twenty-two,
        .twenty,
        .zero-two {
          transform-style: preserve-3d;
          display: flex;
        }
        
        .two, .zero {
          animation: reverse-spin var(--duration) ease infinite;
        }
        
        .dot {
          animation: push-left var(--duration) ease infinite;
        }
        
        .twenty, .zero-two {
          animation: push-right var(--duration) ease infinite;
        }
        
        @keyframes spin {
          0% {
            transform: rotateY(0deg);
          }
          80%, 100% {
            transform: rotateY(180deg);
          }
        }
        @keyframes reverse-spin {
          0% {
            transform: rotateY(0deg);
          }
          80%, 100% {
            transform: rotateY(-180deg);
          }
        }
        @keyframes push-left {
          0% {
            transform: translateX(0);
          }
          80% {
            transform: rotateY(-180deg) translateX(0);
            animation-timing-function: linear;
          }
          82.5% {
            transform: rotateY(-180deg) translateY(0..........完整代码请登录后点击上方下载按钮下载查看