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 #c94.........完整代码请登录后点击上方下载按钮下载查看