css实现带阴影立体文字圈圈旋转动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：css实现带阴影立体文字圈圈旋转动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


    <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Kanit:wght@900&amp;family=Source+Sans+Pro:wght@400;600&amp;display=swap'>

    <style>
        body {
          display: grid;
          justify-content: center;
          align-content: center;
          height: 100vh;
          overflow: hidden;
          background: #dadada;
        }
        @media screen and (max-width: 1000px) {
          body {
            transform: scale(0.9);
          }
        }
        @media screen and (max-width: 600px) {
          body {
            transform: scale(0.6);
          }
        }
        
        .text {
          font-size: 6.5rem;
          font-family: Kanit, sans-serif;
          text-transform: uppercase;
          color: white;
          text-stroke: 2px var(--shadow-color, #282828);
          -webkit-text-stroke: 2px var(--shadow-color, #282828);
          letter-spacing: 3px;
          transform: scaleX(0.5);
          -webkit-animation: stagger 2.5s steps(25) alternate infinite;
                  animation: stagger 2.5s steps(25) alternate infinite;
        }
        @-webkit-keyframes stagger {
          0% {
            text-shadow: -0.3333333333px 0.3px var(--shadow-color, #282828) , -0.6666666667px 0.6px var(--shadow-color, #282828) , -1px 0.9px var(--shadow-color, #282828) , -1.3333333333px 1.2px var(--shadow-color, #282828) , -1.6666666667px 1.5px var(--shadow-color, #282828) , -2px 1.8px var(--shadow-color, #282828) , -2.3333333333px 2.1px var(--shadow-color, #282828) , -2.6666666667px 2.4px var(--shadow-color, #282828) , -3px 2.7px var(--shadow-color, #282828) , -3.3333333333px 3px var(--shadow-color, #282828) , -3.6666666667px 3.3px var(--shadow-color, #282828) , -4px 3.6px var(--shadow-color, #282828) , -4.3333333333px 3.9px var(--shadow-color, #282828) , -4.6666666667px 4.2px var(--shadow-color, #282828) , -5px 4.5px var(--shadow-color, #282828) , -5.3333333333px 4.8px var(--shadow-color, #282828) , -5.6666666667px 5.1px var(--shadow-color, #282828) , -6px 5.4px var(--shadow-color, #282828) , -6.3333333333px 5.7px var(--shadow-color, #282828) , -6.6666666667px 6px var(--shadow-color, #282828) , -7px 6.3px var(--shadow-color, #282828) , -7.3333333333px 6.6px var(--shadow-color, #282828) , -7.6666666667px 6.9px var(--shadow-color, #282828) , -8px 7.2px var(--shadow-color, #282828) , -8.3333333333px 7.5px var(--shadow-color, #282828) , -8.6666666667px 7.8px var(--shadow-color, #282828) , -9px 8.1px var(--shadow-color, #282828) , -9.3333333333px 8.4px var(--shadow-color, #282828) , -9.6666666667px 8.7px var(--shadow-color, #282828) , -10px 9px var(--shadow-color, #282828);
          }
          4% {
            text-shadow: -0.3307049004px 0.3px var(--shadow-color, #282828) , -0.6614098009px 0.6px var(--shadow-color, #282828) , -0.9921147013px 0.9px var(--shadow-color, #282828) , -1.3228196018px 1.2px var(--shadow-color, #282828) , -1.6535245022px 1.5px var(--shadow-color, #282828) , -1.9842294026px 1.8px var(--shadow-color, #282828) , -2.3149343031px 2.1px var(--shadow-color, #282828) , -2.6456392035px 2.4px var(--shadow-color, #282828) , -2.9763441039px 2.7px var(--shadow-color, #282828) , -3.3070490044px 3px var(--shadow-color, #282828) , -3.6377539048px 3.3px var(--shadow-color, #282828) , -3.9684588053px 3.6px var(--shadow-color, #282828) , -4.2991637057px 3.9px var(--shadow-color, #282828) , -4.6298686061px 4.2px var(--shadow-color, #282828) , -4.9605735066px 4.5px var(--shadow-color, #282828) , -5.291278407px 4.8px var(--shadow-color, #282828) , -5.6219833074px 5.1px var(--shadow-color, #282828) , -5.9526882079px 5.4px var(--shadow-color, #282828) , -6.2833931083px 5.7px var(--shadow-color, #282828) , -6.6140980088px 6px var(--shadow-color, #282828) , -6.9448029092px 6.3px var(--shadow-color, #282828) , -7.2755078096px 6.6px var(--shadow-color, #282828) , -7.6062127101px 6.9px var(--shadow-color, #282828) , -7.9369176105px 7.2px var(--shadow-color, #282828) , -8.267622511px 7.5px var(--shadow-color, #282828) , -8.5983274114px 7.8px var(--shadow-color, #282828) , -8.9290323118px 8.1px var(--shadow-color, #282828) , -9.2597372123px 8.4px var(--shadow-color, #282828) , -9.5904421127px 8.7px var(--shadow-color, #282828) , -9.9211470131px 9px var(--shadow-color, #282828);
          }
          8% {
            text-shadow: -0.3228610537px 0.3px var(--shadow-color, #282828) , -0.6457221074px 0.6px var(--shadow-color, #282828) , -0.9685831611px 0.9px var(--shadow-color, #282828) , -1.2914442148px 1.2px var(--shadow-color, #282828) , -1.6143052685px 1.5px var(--shadow-color, #282828) , -1.9371663223px 1.8px var(--shadow-color, #282828) , -2.260027376px 2.1px var(--shadow-color, #282828) , -2.5828884297px 2.4px var(--shadow-color, #282828) , -2.9057494834px 2.7px var(--shadow-color, #282828) , -3.2286105371px 3px var(--shadow-color, #282828) , -3.5514715908px 3.3px var(--shadow-color, #282828) , -3.8743326445px 3.6px var(--shadow-color, #282828) , -4.1971936982px 3.9px var(--shadow-color, #282828) , -4.5200547519px 4.2px var(--shadow-color, #282828) , -4.8429158056px 4.5px var(--shadow-color, #282828) , -5.1657768594px 4.8px var(--shadow-color, #282828) , -5.4886379131px 5.1px var(--shadow-color, #282828) , -5.8114989668px 5.4px var(--shadow-color, #282828) , -6.1343600205px 5.7px var(--shadow-color, #282828) , -6.4572210742px 6px var(--shadow-color, #282828) , -6.7800821279px 6.3px var(--shadow-color, #282828) , -7.1029431816px 6.6px var(--shadow-color, #282828) , -7.4258042353px 6.9px var(--shadow-color, #282828) , -7.748665289px 7.2px var(--shadow-color, #282828) , -8.0715263427px 7.5px var(--shadow-color, #282828) , -8.3943873964px 7.8px var(--shadow-color, #282828) , -8.7172484502px 8.1px var(--shadow-color, #282828) , -9.0401095039px 8.4px var(--shadow-color, #282828) , -9.3629705576px 8.7px var(--shadow-color, #282828) , -9.6858316113px 9px var(--shadow-color, #282828);
          }
          12% {
            text-shadow: -0.3099254953px 0.3px var(--shadow-color, #282828) , -0.6198509906px 0.6px var(--shadow-color, #282828) , -0.9297764859px 0.9px var(--shadow-color, #282828) , -1.2397019812px 1.2px var(--shadow-color, #282828) , -1.5496274765px 1.5px var(--shadow-color, #282828) , -1.8595529718px 1.8px var(--shadow-color, #282828) , -2.1694784671px 2.1px var(--shadow-color, #282828) , -2.4794039624px 2.4px var(--shadow-color, #282828) , -2.7893294577px 2.7px var(--shadow-color, #282828) , -3.099254953px 3px var(--shadow-color, #282828) , -3.4091804483px 3.3px var(--shadow-color, #282828) , -3.7191059436px 3.6px var(--shadow-color, #282828) , -4.0290314388px 3.9px var(--shadow-color, #282828) , -4.3389569341px 4.2px var(--shadow-color, #282828) , -4.6488824294px 4.5px var(--shadow-color, #282828) , -4.9588079247px 4.8px var(--shadow-color, #282828) , -5.26873342px 5.1px var(--shadow-color, #282828) , -5.5786589153px 5.4px var(--shadow-color, #282828) , -5.8885844106px 5.7px var(--shadow-color, #282828) , -6.1985099059px 6px var(--shadow-color, #282828) , -6.5084354012px 6.3px var(--shadow-color, #282828) , -6.8183608965px 6.6px var(--shadow-color, #282828) , -7.1282863918px 6.9px var(--shadow-color, #282828) , -7.4382118871px 7.2px var(--shadow-color, #282828) , -7.7481373824px 7.5px var(--shadow-color, #282828) , -8.0580628777px 7.8px var(--shadow-color, #282828) , -8.367988373px 8.1px var(--shadow-color, #282828) , -8.6779138683px 8.4px var(--shadow-color, #282828) , -8.9878393636px 8.7px var(--shadow-color, #282828) , -9.2977648589px 9px var(--shadow-color, #282828);
          }
          16% {
            text-shadow: -0.2921022267px 0.3px var(--shadow-color, #282828) , -0.5842044534px 0.6px var(--shadow-color, #282828) , -0.87630668px 0.9px var(--shadow-color, #282828) , -1.1684089067px 1.2px var(--shadow-color, #282828) , -1.4605111334px 1.5px var(--shadow-color, #282828) , -1.7526133601px 1.8px var(--shadow-color, #282828) , -2.0447155868px 2.1px var(--shadow-color, #282828) , -2.3368178135px 2.4px var(--shadow-color, #282828) , -2.6289200401px 2.7px var(--shadow-color, #282828) , -2.9210222668px 3px var(--shadow-color, #282828) , -3.2131244935px 3.3px var(--shadow-color, #282828) , -3.5052267202px 3.6px var(--shadow-color, #282828) , -3.7973289469px 3.9px var(--shadow-color, #282828) , -4.0894311735px 4.2px var(--shadow-color, #282828) , -4.3815334002px 4.5px var(--shadow-color, #282828) , -4.6736356269px 4.8px var(--shadow-color, #282828) , -4.9657378536px 5.1px var(--shadow-color, #282828) , -5.2578400803px 5.4px var(--shadow-color, #282828) , -5.5499423069px 5.7px var(--shadow-color, #282828) , -5.8420445336px 6px var(--shadow-color, #282828) , -6.1341467603px 6.3px var(--shadow-color, #282828) , -6.426248987px 6.6px var(--shadow-color, #282828) , -6.7183512137px 6.9px var(--shadow-color, #282828) , -7.0104534404px 7.2px var(--shadow-color, #282828) , -7.302555667px 7.5px var(--shadow-color, #282828) , -7.5946578937px 7.8px var(--shadow-color, #282828) , -7.8867601204px 8.1px var(--shadow-color, #282828) , -8.1788623471px 8.4px var(--shadow-color, #282828) , -8.4709645738px 8.7px var(--shadow-color, #282828) , -8.7630668004px 9px var(--shadow-color, #282828);
          }
          20% {
            text-shadow: -0.2696723315px 0.3px var(--shadow-color, #282828) , -0.53934466.........完整代码请登录后点击上方下载按钮下载查看