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

css实现文字长阴影效果代码

代码语言：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, +366.........完整代码请登录后点击上方下载按钮下载查看