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.5393446629px 0.6px var(--shadow-color, #282828) , -0.8090169944px 0.9px var(--shadow-color, #282828) , -1.0786893258px 1.2px var(--shadow-color, #282828) , -1.3483616573px 1.5px var(--shadow-color, #282828) , -1.6180339887px 1.8px var(--shadow-color, #282828) , -1.8877063202px 2.1px var(--shadow-color, #282828) , -2.1573786517px 2.4px var(--shadow-color, #282828) , -2.4270509831px 2.7px var(--shadow-color, #282828) , -2.6967233146px 3px var(--shadow-color, #282828) , -2.966395646px 3.3px var(--shadow-color, #282828) , -3.2360679775px 3.6px var(--shadow-color, #282828) , -3.505740309px 3.9px var(--shadow-color, #282828) , -3.7754126404px 4.2px var(--shadow-color, #282828) , -4.0450849719px 4.5px var(--shadow-color, #282828) , -4.3147573033px 4.8px var(--shadow-color, #282828) , -4.5844296348px 5.1px var(--shadow-color, #282828) , -4.8541019662px 5.4px var(--shadow-color, #282828) , -5.1237742977px 5.7px var(--shadow-color, #282828) , -5.3934466292px 6px var(--shadow-color, #282828) , -5.6631189606px 6.3px var(--shadow-color, #282828) , -5.9327912921px 6.6px var(--shadow-color, #282828) , -6.2024636235px 6.9px var(--shadow-color, #282828) , -6.472135955px 7.2px var(--shadow-color, #282828) , -6.7418082865px 7.5px var(--shadow-color, #282828) , -7.0114806179px 7.8px var(--shadow-color, #282828) , -7.2811529494px 8.1px var(--shadow-color, #282828) , -7.5508252808px 8.4px var(--shadow-color, #282828) , -7.8204976123px 8.7px var(--shadow-color, #282828) , -8.0901699437px 9px var(--shadow-color, #282828);
          }
          24% {
            text-shadow: -0.2429895425px 0.3px var(--shadow-color, #282828) , -0.4859790849px 0.6px var(--shadow-color, #282828) , -0.7289686274px 0.9px var(--shadow-color, #282828) , -0.9719581699px 1.2px var(--shadow-color, #282828) , -1.2149477124px 1.5px var(--shadow-color, #282828) , -1.4579372548px 1.8px var(--shadow-color, #282828) , -1.7009267973px 2.1px var(--shadow-color, #282828) , -1.9439163398px 2.4px var(--shadow-color, #282828) , -2.1869058823px 2.7px var(--shadow-color, #282828) , -2.4298954247px 3px var(--shadow-color, #282828) , -2.6728849672px 3.3px var(--shadow-color, #282828) , -2.9158745097px 3.6px var(--shadow-color, #282828) , -3.1588640522px 3.9px var(--shadow-color, #282828) , -3.4018535946px 4.2px var(--shadow-color, #282828) , -3.6448431371px 4.5px var(--shadow-color, #282828) , -3.8878326796px 4.8px var(--shadow-color, #282828) , -4.1308222221px 5.1px var(--shadow-color, #282828) , -4.3738117645px 5.4px var(--shadow-color, #282828) , -4.616801307px 5.7px var(--shadow-color, #282828) , -4.8597908495px 6px var(--shadow-color, #282828) , -5.1027803919px 6.3px var(--shadow-color, #282828) , -5.3457699344px 6.6px var(--shadow-color, #282828) , -5.5887594769px 6.9px var(--shadow-color, #282828) , -5.8317490194px 7.2px var(--shadow-color, #282828) , -6.0747385618px 7.5px var(--shadow-color, #282828) , -6.3177281043px 7.8px var(--shadow-color, #282828) , -6.5607176468px 8.1px var(--shadow-color, #282828) , -6.8037071893px 8.4px var(--shadow-color, #282828) , -7.0466967317px 8.7px var(--shadow-color, #282828) , -7.2896862742px 9px var(--shadow-color, #282828);
          }
          28% {
            text-shadow: -0.2124746632px 0.3px var(--shadow-color, #282828) , -0.4249493265px 0.6px var(--shadow-color, #282828) , -0.6374239897px 0.9px var(--shadow-color, #282828) , -0.849898653px 1.2px var(--shadow-color, #282828) , -1.0623733162px 1.5px var(--shadow-color, #282828) , -1.2748479795px 1.8px var(--shadow-color, #282828) , -1.4873226427px 2.1px var(--shadow-color, #282828) , -1.699797306px 2.4px var(--shadow-color, #282828) , -1.9122719692px 2.7px var(--shadow-color, #282828) , -2.1247466325px 3px var(--shadow-color, #282828) , -2.3372212957px 3.3px var(--shadow-color, #282828) , -2.549695959px 3.6px var(--shadow-color, #282828) , -2.7621706222px 3.9px var(--shadow-color, #282828) , -2.9746452855px 4.2px var(--shadow-color, #282828) , -3.1871199487px 4.5px var(--shadow-color, #282828) , -3.399594612px 4.8px var(--shadow-color, #282828) , -3.6120692752px 5.1px var(--shadow-color, #282828) , -3.8245439385px 5.4px var(--shadow-color, #282828) , -4.0370186017px 5.7px var(--shadow-color, #282828) , -4.249493265px 6px var(--shadow-color, #282828) , -4.4619679282px 6.3px var(--shadow-color, #282828) , -4.6744425915px 6.6px var(--shadow-color, #282828) , -4.8869172547px 6.9px var(--shadow-color, #282828) , -5.099391918px 7.2px var(--shadow-color, #282828) , -5.3118665812px 7.5px var(--shadow-color, #282828) , -5.5243412445px 7.8px var(--shadow-color, #282828) , -5.7368159077px 8.1px var(--shadow-color, #282828) , -5.949290571px 8.4px var(--shadow-color, #282828) , -6.1617652342px 8.7px var(--shadow-color, #282828) , -6.3742398975px 9px var(--shadow-color, #282828);
          }
          32% {
            text-shadow: -0.1786089317px 0.3px var(--shadow-color, #282828) , -0.3572178633px 0.6px var(--shadow-color, #282828) , -0.535826795px 0.9px var(--shadow-color, #282828) , -0.7144357266px 1.2px var(--shadow-color, #282828) , -0.8930446583px 1.5px var(--shadow-color, #282828) , -1.07165359px 1.8px var(--shadow-color, #282828) , -1.2502625216px 2.1px var(--shadow-color, #282828) , -1.4288714533px 2.4px var(--shadow-color, #282828) , -1.6074803849px 2.7px var(--shadow-color, #282828) , -1.7860893166px 3px var(--shadow-color, #282828) , -1.9646982483px 3.3px var(--shadow-color, #282828) , -2.1433071799px 3.6px var(--shadow-color, #282828) , -2.3219161116px 3.9px var(--shadow-color, #282828) , -2.5005250432px 4.2px var(--shadow-color, #282828) , -2.6791339749px 4.5px var(--shadow-color, #282828) , -2.8577429066px 4.8px var(--shadow-color, #282828) , -3.0363518382px 5.1px var(--shadow-color, #282828) , -3.2149607699px 5.4px var(--shadow-color, #282828) , -3.3935697015px 5.7px var(--shadow-color, #282828) , -3.5721786332px 6px var(--shadow-color, #282828) , -3.7507875649px 6.3px var(--shadow-color, #282828) , -3.9293964965px 6.6px var(--shadow-color, #282828) , -4.1080054282px 6.9px var(--shadow-color, #282828) , -4.2866143598px 7.2px var(--shadow-color, #282828) , -4.4652232915px 7.5px var(--shadow-color, #282828) , -4.6438322232px 7.8px var(--shadow-color, #282828) , -4.8224411548px 8.1px var(--shadow-color, #282828) , -5.0010500865px 8.4px var(--shadow-color, #282828) , -5.1796590181px 8.7px var(.........完整代码请登录后点击上方下载按钮下载查看