css实现文字长阴影效果代码-html代码-BFW代码库

代码语言：html
代码描述：css实现文字长阴影效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        @import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap");
        * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }
        
        body {
          min-height: 100vh;
          display: grid;
          overflow: hidden;
          font-family: "Bebas Neue", sans-serif;
          color: white;
          letter-spacing: 2px;
          line-height: 0.8;
        }
        body .container {
          background: #f58463;
          border: solid 40px white;
          position: relative;
        }
        body .container .text {
          position: absolute;
          top: 10%;
          left: 5%;
          font-size: 7vh;
          width: 25vw;
        }
        body .container .text > span {
          position: relative;
          line-height: 1;
          display: block;
        }
        body .container .text > span:after {
          content: attr(data-value);
          position: absolute;
          left: 0;
          top: 0;
          text-shadow: 500px 500px #c94636, +498px 498px #c94636, +496px 496px #c94636, +494px 494px #c94636, +492px 492px #c94636, +490px 490px #c94636, +488px 488px #c94636, +486px 486px #c94636, +484px 484px #c94636, +482px 482px #c94636, +480px 480px #c94636, +478px 478px #c94636, +476px 476px #c94636, +474px 474px #c94636, +472px 472px #c94636, +470px 470px #c94636, +468px 468px #c94636, +466px 466px #c94636, +464px 464px #c94636, +462px 462px #c94636, +460px 460px #c94636, +458px 458px #c94636, +456px 456px #c94636, +454px 454px #c94636, +452px 452px #c94636, +450px 450px #c94636, +448px 448px #c94636, +446px 446px #c94636, +444px 444px #c94636, +442px 442px #c94636, +440px 440px #c94636, +438px 438px #c94636, +436px 436px #c94636, +434px 434px #c94636, +432px 432px #c94636, +430px 430px #c94636, +428px 428px #c94636, +426px 426px #c94636, +424px 424px #c94636, +422px 422px #c94636, +420px 420px #c94636, +418px 418px #c94636, +416px 416px #c94636, +414px 414px #c94636, +412px 412px #c94636, +410px 410px #c94636, +408px 408px #c94636, +406px 406px #c94636, +404px 404px #c94636, +402px 402px #c94636, +400px 400px #c94636, +398px 398px #c94636, +396px 396px #c94636, +394px 394px #c94636, +392px 392px #c94636, +390px 390px #c94636, +388px 388px #c94636, +386px 386px #c94636, +384px 384px #c94636, +382px 382px #c94636, +380px 380px #c94636, +378px 378px #c94636, +376px 376px #c94636, +374px 374px #c94636, +372px 372px #c94636, +370px 370px #c94636, +368px 368px #c94636, +366px 366px #c94636, +364px 364px #c94636, +362px 362px #c94636, +360px 360px #c94636, +358px 358px #c94636, +356px 356px #c94636, +354px 354px #c94636, +352px 352px #c94636, +350px 350px #c94636, +348px 348px #c94636, +346px 346px #c94636, +344px 344px #c94636, +342px 342px #c94636, +340px 340px #c94636, +338px 338px #c94636, +336px 336px #c94636, +334px 334px #c94636, +332px 332px #c94636, +330px 330px #c94636, +328px 328px #c94636, +326px 326px #c94636, +324px 324px #c94636, +322px 322px #c94636, +320px 320px #c94636, +318px 318px #c94636, +316px 316px #c94636, +314px 314px #c94636, +312px 312px #c94636, +310px 310px #c94636, +308px 308px #c94636, +306px 306px #c94636, +304px 304px #c94636, +302px 302px #c94636, +300px 300px #c94636, +298px 298px #c94636, +296px 296px #c94636, +294px 294px #c94636, +292px 292px #c94636, +290px 290px #c94636, +288px 288px #c94636, +286px 286px #c94636, +284px 284px #c94636, +282px 282px #c94636, +280px 280px #c94636, +278px 278px #c94636, +276px 276px #c94636, +274px 274px #c94636, +272px 272px #c94636, +270px 270px #c94636, +268px 268px #c94636, +266px 266px #c94636, +264px 264px #c94636, +262px 262px #c94636, +260px 260px #c94636, +258px 258px #c94636, +256px 256px #c94636, +254px 254px #c94636, +252px 252px #c94636, +250px 250px #c94636, +248px 248px #c94636, +246px 246px #c94636, +244px 244px #c94636, +242px 242px #c94636, +240px 240px #c94636, +238px 238px #c94636, +236px 236px #c94636, +234px 234px #c94636, +232px 232px #c94636, +230px 230px #c94636, +228px 228px #c94636, +226px 226px #c94636, +224px 224px #c94636, +222px 222px #c94636, +220px 220px #c94636, +218px 218px #c94636, +216px 216px #c94636, +214px 214px #c94636, +212px 212px #c94636, +210px 210px #c94636, +208px 208px #c94636, +206px 206px #c94636, +204px 204px #c94636, +202px 202px #c94636, +200px 200px #c94636, +198px 198px #c94636, +196px 196px #c94636, +194px 194px #c94636, +192px 192px #c94636, +190px 190px #c94636, +188px 188px #c94636, +186px 186px #c94636, +184px 184px #c94636, +182px 182px #c94636, +180px 180px #c94636, +178px 178px #c94636, +176px 176px #c94636, +174px 174px #c94636, +172px 172px #c94636, +170px 170px #c94636, +168px 168px #c94636, +166px 166px #c94636, +164px 164px #c94636, +162px 162px #c94636, +160px 160px #c94636, +158px 158px #c94636, +156px 156px #c94636, +154px 154px #c94636, +152px 152px #c94636, +150px 150px #c94636, +148px 148px #c94636, +146px 146px #c94636, +144px 144px #c94636, +142px 142px #c94636, +140px 140px #c94636, +138px 138px #c94636, +136px 136px #c94636, +134px 134px #c94636, +132px 132px #c94636, +130px 130px #c94636, +128px 128px #c94636, +126px 126px #c94636, +124px 124px #c94636, +122px 122px #c94636, +120px 120px #c94636, +118px 118px #c94636, +116px 116px #c94636, +114px 114px #c94636, +112px 112px #c94636, +110px 110px #c94636, +108px 108px #c94636, +106px 106px #c94636, +104px 104px #c94636, +102px 102px #c94636, +100px 100px #c94636, +98px 98px #c94636, +96px 96px #c94636, +94px 94px #c94636, +92px 92px #c94636, +90px 90px #c94636, +88px 88px #c94636, +86px 86px #c94636, +84px 84px #c94636, +82px 82px #c94636, +80px 80px #c94636, +78px 78px #c94636, +76px 76px #c94636, +74px 74px #c94636, +72px 72px #c94636, +70px 70px #c94636, +68px 68px #c94636, +66px 66px #c94636, +64px 64px #c94636, +62px 62px #c94636, +60px 60px #c94636, +58px 58px #c94636, +56px 56px #c94636, +54px 54px #c94636, +52px 52px #c94636, +50px 50px #c94636, +48px 48px #c94636, +46px 46px #c94636, +44px 44px #c94636, +42px 42px #c94636, +40px 40px #c94636, +38px 38px #c94636, +36px 36px #c94636, +34px 34px #c94636, +32px 32px #c94636, +30px 30px #c94636, +28px 28px #c94636, +26px 26px #c94636, +24px 24px #c94636, +22px 22px #c94636, +20px 20px #c94636, +18px 18px #c94636, +16px 16px #c94636, +14px 14px #c94636, +12px 12px #c94636, +10px 10px #c94636, +8px 8px #c94636, +6px 6px #c94636, +4px 4px #c94636, +1px 1px #c94636;
          opacity: 0.6;
        }
        @media (min-width: 700px) {
          body .container .text {
            font-size: 20vh;
          }
        }
        @media (min-height: 370px) {
          body .container h1 span:after {
            text-shadow: 600px 600px #c94636, +598px 598px #c94636, +596px 596px #c94636, +594px 594px #c94636, +592px 592px #c94636, +590px 590px #c94636, +588px 588px #c94636, +586px 586px #c94636, +584px 584px #c94636, +582px 582px #c94636, +580px 580px #c94636, +578px 578px #c94636, +576px 576px #c94636, +574px 574px #c94636, +572px 572px #c94636, +570px 570px #c94636, +568px 568px #c94636, +566px 566px #c94636, +564px 564px #c94636, +562px 562px #c94636, +560px 560px #c94636, +558px 558px #c94636, +556px 556px #c94636, +554px 554px #c94636, +552px 552px #c94636, +550px 550px #c94636, +548px 548px #c94636, +546px 546px #c94636, +544px 544px #c94636, +542px 542px #c94636, +540px 540px #c94636, +538px 538px #c94636, +536px 536px #c94636, +534px 534px #c94636, +532px 532px #c94636, +530px 530px #c94636, +528px 528px #c94636, +526px 526px #c94636, +524px 524px #c94636, +522px 522px #c94636, +520px 520px #c94636, +518px 518px #c94636, +516px 516px #c94636, +514px 514px #c94636, +512px 512px #c94636, +510px 510px #c94636, +508px 508px #c94636, +506px 506px #c94636, +504px 504px #c94636, +502px 502px #c94636, +500px 500px #c94636, +498px 498px #c94636, +496px 496px #c94636, +494px 494px #c94636, +492px 492px #c94636, +490px 490px #c94636, +488px 488px #c94636, +486px 486px #c94636, +484px 484px #c94636, +482px 482px #c94636, +480px 480px #c94636, +478px 478px #c94636, +476px 476px #c94636, +474px 474px #c94636, +472px 472px #c94636, +470px 470px #c94636, +468px 468px #c94636, +466px 466px #c94636, +464px 464px #c94636, +462px 462px #c94636, +460px 460px #c94636, +458px 458px #c94636, +456px 456px #c94636, +454px 454px #c94636, +452px 452px #c94636, +450px 450px #c94636, +448px 448px #c94636, +446px 446px #c94636, +444px 444px #c94636, +442px 442px #c94636, +440px 440px #c94636, +438px 438px #c94636, +436px 436px #c94636, +434px 434px #c94636, +432px 432px #c94636, +430px 430px #c94636, +428px 428px #c94636, +426px 426px #c94636, +424px 424px #c94636, +422px 422px #c94636, +420px 420px #c94636, +418px 418px #c94636, +416px 416px #c94636, +414px 414px #c94636, +412px 412px #c94636, +410px 410px #c94636, +408px 408px #c94636, +406px 406px #c94636, +404px 404px #c94636, +402px 402px #c94636, +400px 400px #c94636, +398px 398px #c94636, +396px 396px #c94636, +394px 394px #c94636, +392px 392px #c94636, +390px 390px #c94636, +388px 388px #c94636, +386px 386px #c94636, +384px 384px #c94636, +382px 382px #c94636, +380px 380px #c94636, +378px 378px #c94636, +376px 376px #c94636, +374px 374px #c94636, +372px 372px #c94636, +370px 370px #c94636, +368px 368px #c94636, +366px 366px #c94636, +364px 364px #c94636, +362px 362px #c94636, +360px 360px #c94636, +358px 358px #c94636, +356px 356px #c94636, +354px 354px #c94636, +352px 352px #c94636, +350px 350px #c94636, +348px 348px #c94636, +346px 346px #c94636, +344px 344px #c94636, +342px 342px #c94636, +340px 340px #c94636, +338px 338px #c94636, +336px 336px #c94636, +334px 334px #c94636, +332px 332px #c94636, +330px 330px #c94636, +328px 328px #c94636, +326px 326px #c94636, +324px 324px #c94636, +322px 322px #c94636, +320px 320px #c94636, +318px 318px #c94636, +316px 316px #c94636, +314px 314px #c94636, +312px 312px #c94636, +310px 310px #c94636, +308px 308px #c94636, +306px 306px #c94636, +304px 304px #c94636, +302px 302px #c94636, +300px 300px #c94636, +298px 298px #c94636, +296px 296px #c94636, +294px 294px #c94636, +292px 292px #c94636, +290px 290px #c94636, +288px 288px #c94636, +286px 286px #c94636, +284px 284px #c94636, +282px 282px #c94636, +280px 280px #c94636, +278px 278px #c94636, +276px 276px #c94636, +274px 274px #c94636, +272px 272px #c94636, +270px 270px #c94636, +268px 268px #c94636, +266px 266px #c94636, +264px 264px #c94636, +262px 262px #c94636, +260px 260px #c94636, +258px 258px #c94636, +256px 256px #c94636, +254px 254px #c94636, +252px 252px #c94636, +250px 250px #c94636, +248px 248px #c94636, +246px 246px #c94636, +244px 244px #c94636, +242px 242px #c94636, +240px 240px #c94636, +238px 238px #c94636, +236px 236px #c94636, +234px 234px #c94636, +232px 232px #c94636, +230px 230px #c94636, +228px 228px #c94636, +226px 226px #c94636, +224px 224px #c94636, +222px 222px #c94636, +220px 220px #c94636, +218px 218px #c94636, +216px 216px #c94636, +214px 214px #c94636, +212px 212px #c94636, +210px 210px #c94636, +208px 208px #c94636, +206px 206px #c94636, +204px 204px #c94636, +202px 202px #c94636, +200px 200px #c94636, +198px 198px #c94636, +196px 196px #c94636, +194px 194px #c94636, +192px 192px #c94636, +190px 190px #c94636, +188px 188px #c94636, +186px 186px #c94636, +184px 184px #c94636, +182px 182px #c94636, +180px 180px #c94636, +178px 178px #c94636, +176px 176px #c94636, +174px 174px #c94636, +172px 172px #c94636, +170px 170px #c94636, +168px 168px #c94636, +166px 166px #c94636, +164px 164px #c94636, +162px 162px #c94636, +160px 160px #c94636, +158px 158px #c94636, +156px 156px #c94636, +154px 154px #c94636, +152px 152px #c94636, +150px 150px #c94636, +148px 148px #c94636, +146px 146px #c94636, +144px 144px #c94636, +142px 142px #c94636, +140px 140px #c94636, +138px 138px #c94636, +136px 136px #c94636, +134px 134px #c94636, +132px 132px #c94636, +130px 130px #c94636, +128px 128px #c94636, +126px 126px #c94636, +124px 124px #c94636, +122px 122px #c94636, +120px 120px #c94636, +118px 118px #c94636, +116px 116px #c94636, +114px 114px #c94636, +112px 112px #c94636, +110px 110px #c94636, +108px 108px #c94636, +106px 106px #c94636, +104px 104px #c94636, +102px 102px #c94636, +100px 100px #c94636, +98px 98px #c94636, +96px 96px #c94636, +94px 94px #c94636, +92px 92px #c94636, +90px 90px #c94636, +88px 88px #c94636, +86px 86px #c94636, +84px 84px #c94636, +82px 82px #c94636, +80px 80px #c94636, +78px 78px #c94636, +76px 76px #c94636, +74px 74px #c94636, +72px 72px #c94636, +70px 70px #c94636, +68px 68px #c94636, +66px 66px #c94636, +64px 64px #c94636, +62px 62px #c94636, +60px 60px #c94636, +58px 58px #c94636, +56px 56px #c94636, +54px 54px #c94636, +52px 52px #c94636, +50px 50px #c94636, +48px 48px #c94636, +46px 46px #c94636, +44px 44px #c94636, +42px 42px #c94636, +40px 40px #c94636, +38px 38px #c94636, +36px 36px #c94636, +34px 34px #c94636, +32px 32px #c94636, +30px 30px #c94636, +28px 28px #c94636, +26px 26px #c94636, +24px 24px #c94636, +22px 22px #c94636, +20px 20px #c94636, +18px 18px #c94636, +16px 16px #c94636, +14px 14px #c94636, +12px 12px #c94636, +10px 10px #c94636, +8px 8px #c94636, +6px 6px #c94636, +4px 4px #c94636, +1px 1px #c94636;
          }
        }
        @media (min-height: 660px) {
          body .container .text span:after {
            text-shadow: 1200px 1200px #c94636, +1198px 1198px #c94636, +1196px 1196px #c94636, +1194px 1194px #c9463.........完整代码请登录后点击上方下载按钮下载查看