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=Modak&amp;display=swap"rel="stylesheet'>

    <style>
        @font-face {
          font-family: "Bogart";
          src: url("https://assets.codepen.io/383755/bogart-semibold.woff2") format("woff2");
        }
        body,
        html {
          background: #fff;
          height: 100%;
          display: grid;
        }
        body p,
        html p {
          color: transparent;
          z-index: 9;
          text-align: center;
          filter: drop-shadow(0px 5px 15px rgba(0, 33, 44, 0.5));
          transform-style: preserve-3d;
          transform: translateZ(0.25px);
        }
        body p span.word,
        html p span.word {
          letter-spacing: -3px;
          display: block;
          line-height: 1.15;
          position: relative;
          transform: translate(0px, -5px);
        }
        body p span.word span.char:nth-of-type(1),
        html p span.word span.char:nth-of-type(1) {
          z-index: 5;
          text-shadow: 1px -1.25px #2dcbfe, 2px -2.5px #2acafe, 3px -3.75px #28cafe, 4px -5px #25c9fe, 5px -6.25px #23c8fe, 6px -7.5px #20c8fe, 7px -8.75px #1ec7fe, 8px -10px #1bc7fe, 9px -11.25px #19c6fe, 10px -12.5px #16c5fe, 11px -13.75px #14c5fe, 12px -15px #11c4fe, 13px -16.25px #0fc3fe, 14px -17.5px #0cc3fe, 15px -18.75px #09c2fe, 16px -20px #07c2fe, 17px -21.25px #04c1fe, 18px -22.5px #02c0fe, 19px -23.75px #01bffc, 20px -25px #01bdf9, 21px -26.25px #01bbf7, 22px -27.5px #01b9f4, 23px -28.75px #01b7f2, 24px -30px #01b5ef, 25px -31.25px #01b3ed, 26px -32.5px #01b1ea, 27px -33.75px #01afe8, 28px -35px #01ade5, 29px -36.25px #01ace3, 30px -37.5px #01aae0, 31px -38.75px #01a8dd, 32px -40px #01a6db, 33px -41.25px #01a4d8, 34px -42.5px #01a2d6, 35px -43.75px #01a0d3, 36px -45px #019ed1, 37px -46.25px #019cce, 38px -47.5px #019acc, 39px -48.75px #0198c9, 40px -50px #0196c7, 41px -51.25px #0194c4, 42px -52.5px #0193c2, 43px -53.75px #0191bf, 44px -55px #018fbc, 45px -56.25px #018dba, 46px -57.5px #018bb7, 47px -58.75px #0189b5, 48px -60px #0187b2, 49px -61.25px #0185b0, 50px -62.5px #0183ad, 51px -63.75px #0181ab, 52px -65px #017fa8, 53px -66.25px #017da6, 54px -67.5px #017ba3, 55px -68.75px #017aa1, 56px -70px #01789e, 57px -71.25px #01769b, 58px -72.5px #017499, 59px -73.75px #017296, 60px -75px #017094, 61px -76.25px #016e91, 62px -77.5px #016c8f, 63px -78.75px #016a8c, 64px -80px #01688a;
        }
        body p span.word span.char:nth-of-type(3),
        html p span.word span.char:nth-of-type(3) {
          z-index: 9;
        }
        body p span.word span.char:first-of-type,
        html p span.word span.char:first-of-type {
          z-index: 0;
        }
        body p span.word span.char:last-of-type,
        html p span.word span.char:last-of-type {
          z-index: -2;
        }
        body p span.word span.char:nth-of-type(2),
        html p span.word span.char:nth-of-type(2) {
          z-index: 4;
          text-shadow: 0.5px -1.25px #2dcbfe, 1px -2.5px #2acafe, 1.5px -3.75px #28cafe, 2px -5px #25c9fe, 2.5px -6.25px #23c8fe, 3px -7.5px #20c8fe, 3.5px -8.75px #1ec7fe, 4px -10px #1bc7fe, 4.5px -11.25px #19c6fe, 5px -12.5px #16c5fe, 5.5px -13.75px #14c5fe, 6px -15px #11c4fe, 6.5px -16.25px #0fc3fe, 7px -17.5px #0cc3fe, 7.5px -18.75px #09c2fe, 8px -20px #07c2fe, 8.5px -21.25px #04c1fe, 9px -22.5px #02c0fe, 9.5px -23.75px #01bffc, 10px -25px #01bdf9, 10.5px -26.25px #01bbf7, 11px -27.5px #01b9f4, 11.5px -28.75px #01b7f2, 12px -30px #01b5ef, 12.5px -31.25px #01b3ed, 13px -32.5px #01b1ea, 13.5px -33.75px #01afe8, 14px -35px #01ade5, 14.5px -36.25px #01ace3, 15px -37.5px #01aae0, 15.5px -38.75px #01a8dd, 16px -40px #01a6db, 16.5px -41.25px #01a4d8, 17px -42.5px #01a2d6, 17.5px -43.75px #01a0d3, 18px -45px #019ed1, 18.5px -46.25px #019cce, 19px -47.5px #019acc, 19.5px -48.75px #0198c9, 20px -50px #0196c7, 20.5px -51.25px #0194c4, 21px -52.5px #0193c2, 21.5px -53.75px #0191bf, 22px -55px #018fbc, 22.5px -56.25px #018dba, 23px -57.5px #018bb7, 23.5px -58.75px #0189b5, 24px -60px #0187b2, 24.5px -61.25px #0185b0, 25px -62.5px #0183ad, 25.5px -63.75px #0181ab, 26px -65px #017fa8, 26.5px -66.25px #017da6, 27px -67.5px #017ba3, 27.5px -68.75px #017aa1, 28px -70px #01789e, 28.5px -71.25px #01769b, 29px -72.5px #017499, 29.5px -73.75px #017296, 30px -75px #017094, 30.5px -76.25px #016e91, 31px -77.5px #016c8f, 31.5px -78.75px #016a8c, 32px -80px #01688a;
        }
        body p span.word span.char:nth-of-type(3),
        html p span.word span.char:nth-of-type(3) {
          z-index: 9;
        }
        body p span.word span.char:first-of-type,
        html p span.word span.char:first-of-type {
          z-index: 0;
        }
        body p span.word span.char:last-of-type,
        html p span.word span.char:last-of-type {
          z-index: -2;
        }
        body p span.word span.char:nth-of-type(3),
        html p span.word span.char:nth-of-type(3) {
          z-index: 3;
          text-shadow: 0px -1.25px #2dcbfe, 0px -2.5px #2acafe, 0px -3.75px #28cafe, 0px -5px #25c9fe, 0px -6.25px #23c8fe, 0px -7.5px #20c8fe, 0px -8.75px #1ec7fe, 0px -10px #1bc7fe, 0px -11.25px #19c6fe, 0px -12.5px #16c5fe, 0px -13.75px #14c5fe, 0px -15px #11c4fe, 0px -16.25px #0fc3fe, 0px -17.5px #0cc3fe, 0px -18.75px #09c2fe, 0px -20px #07c2fe, 0px -21.25px #04c1fe, 0px -22.5px #02c0fe, 0px -23.75px #01bffc, 0px -25px #01bdf9, 0px -26.25px #01bbf7, 0px -27.5px #01b9f4, 0px -28.75px #01b7f2, 0px -30px #01b5ef, 0px -31.25px #01b3ed, 0px -32.5px #01b1ea, 0px -33.75px #01afe8, 0px -35px #01ade5, 0px -36.25px #01ace3, 0px -37.5px #01aae0, 0px -38.75px #01a8dd, 0px -40px #01a6db, 0px -41.25px #01a4d8, 0px -42.5px #01a2d6, 0px -43.75px #01a0d3, 0px -45px #019ed1, 0px -46.25px #019cce, 0px -47.5px #019acc, 0px -48.75px #0198c9, 0px -50px #0196c7, 0px -51.25px #0194c4, 0px -52.5px #0193c2, 0px -53.75px #0191bf, 0px -55px #018fbc, 0px -56.25px #018dba, 0px -57.5px #018bb7, 0px -58.75px #0189b5, 0px -60px #0187b2, 0px -61.25px #0185b0, 0px -62.5px #0183ad, 0px -63.75px #0181ab, 0px -65px #017fa8, 0px -66.25px #017da6, 0px -67.5px #017ba3, 0px -68.75px #017aa1, 0px -70px #01789e, 0px -71.25px #01769b, 0px -72.5px #017499, 0px -73.75px #017296, 0px -75px #017094, 0px -76.25px #01.........完整代码请登录后点击上方下载按钮下载查看