文字动画 效果设计

            
            
@function textShadow($precision, $size, $color, $xdirection, $ydirection) {
    $value: null;
    $offset: 0;
    $length: $size * (1 / $precision) - 1;

    @for $i from 0 through $length {
        $offset: $offset + $precision;
        $shadow: ($offset * $xdirection) +
            px
            $offset *
            $ydirection +
            px
            darken($color, (($i * $precision)/0.5));
        $value: append($value, $shadow, comma);
    }

    @return $value;
}
$b: #2dcbfe;
$p: #ef54b0;
$y: #ffc34f;
$g: #efe1e5;

body {
    --hue: 350; /* 更新以切换不同颜色 */
    --bg: oklch(45% .5 var(--hue));
    background-color: var(--bg);
    /* background: #fff; */
    height: 100vh;
    display: grid;
    p {
        color: transparent;
        z-index: 9;
        text-align: center;
        filter: drop-shadow(0px 5px 15px rgba(darken($b, 50%), 0.5));
        transform-style: preserve-3d;
        transform: translateZ(0.25px);
        span.word {
            letter-spacing: -3px;
            display: block;
            line-height: 1.15;
            position: relative;
            transform: translate(0px, -5px);
            span.char {
                @for $i from 1 through 6 {
                    &:nth-of-type(#{$i}) {
                        z-index: #{6 - $i};
                        text-shadow: textShadow(0.25, 16, $b, (6 - ($i * 2)), -5);
                    }
                    &:nth-of-type(3) {
                        z-index: 9;
                    }
                    &:first-of-type {
                        z-index: 0;
                    }
                    &:last-of-type {
                        z-index: -2;
                    }
                }
            }
            &:first-of-type {
                z-index: 3;
                span.char {
                    @for $i from 1 through 5 {
                        &:nth-of-type(#{$i}) {
                            text-shadow: textShadow(0.25, 16, $p, (4 - ($i * 1.25)), 3);

                            z-index: $i;
                        }
                        &:nth-of-type(3) {
                            z-index: 2;
                        }
                        &:nth-of-type(4) {
                            z-index: -1;
                        }
                        &:last-of-type {
                            z-index: -2;
                        }
                    }
                }
            }
            &:first-of-type {
                span.char {
                    @for $i from 1 through 6 {
                        &:nth-of-type(#{$i}) {
                            &:before {
                                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewbox='0 0 200 200' width='200' height='200'%3E%3Cdefs%3E%3Cstyle%3E%0Apath%7Banimation:bounce 0.5s ease-in-out infinite alternate #{($i/-6) - 0.25}s%7D@keyframes bounce%7Bto%7Bd:path('M 0 100 Q 100 180 200 100 ');%7D%7D%0A%3C/style%3E%3C/defs%3E%3Cpath fill-rule='nonzero' style='filter:blur(0px); fill:transparent;stroke:%23ffc34f; stroke-width:125; stroke-linecap:round;' d='M 0 100 Q 100 20 200 100 ' /%3E%3Cpath fill-rule='nonzero' style='filter:blur(0px);fill:transparent;stroke:%23efe1e5; stroke-width:25; animation-delay:#{($i/-6) - 0.35}s; stroke-linecap:round;' d='M 0 100 Q 100 20 200 100 ' /%3E%3C/svg%3E"),
                                    linear-gradient(to bottom, $g 50%, $g 50%);
                            }
                        }
                    }
                }
            }
            span.char {
                color: $y;
                display: inline-block;
                @for $i from 1 through 6 {
                    &:nth-of-type(#{$i}) {
                        &:before {
                            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewbox='0 0 200 200' width='200' height='200'%3E%3Cdefs%3E%3Cstyle%3E%0Apath%7Banimation:bounce 0.5s ease-in-out infinite alternate #{($i/-6) - 0.25}s%7D@keyframes bounce%7Bto%7Bd:path('M 0 100 Q 100 180 200 100 ');%7D%7D%0A%3C/style%3E%3C/defs%3E%3Cpath fill-rule='nonzero' style='filter:blur(0px);fill:transparent;stroke:%23ffc34f; stroke-width:125; stroke-linecap:round;' d='M 0 100 Q 100 20 200 100 ' /%3E%3Cpath fill-rule='nonzero' style='filter:blur(0px);fill:transparent;stroke:%23ef54b0; stroke-width:25; animation-delay:#{($i/-6) - 0.35}s; stroke-linecap:round;' d='M 0 100 Q 100 20 200 100 ' /%3E%3C/svg%3E"),
                                linear-gradient(to bottom, $p 50%, $g 50%);
                        }
                    }
                }
                &:before {
                    text-shadow: none;
                    background-size: calc(100% + 50px) auto;
                    background-position: 50% 20px, 50% 50%;
                    background-repeat: repeat-x;
                }
                position: relative;

                &:before {
                    content: attr(data-char);
                    position: absolute;
                    color: transparent;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                    box-sizing: border-box;
                    padding: 0.5rem;
                    -webkit-text-fill-color: transparent;
                    -webkit-background-clip: text;
                }
            }
        }
    }
}

p {
    margin: auto;
    font-size: 8rem;
    font-weight: bold;
}

        

            
            let text = document.getElementsByTagName("p");

function splitText(words) {
    for (let word of words) {
        let newword = word.textContent.split(" ");
        word.textContent = "";
        for (let i = 0; i < newword.length; i++) {
            let newWords = newword[i].split("");
            let wordwrap = document.createElement("span");
            wordwrap.setAttribute("word-index", i);
            wordwrap.classList.add("word");
            wordwrap.setAttribute("data-word", newword[i]);
            let letters = newword[i].split("");
            let j = 0;
            for (let letter of letters) {
                j++;
                wordwrap.innerHTML +=
                    '<span style="--char-index:' +
                    j +
                    '" data-char="' +
                    letter +
                    '" class="char">' +
                    letter +
                    "</span>";
            }
            word.appendChild(wordwrap);
        }
    }
    document.body.classList.add("loaded");
}

splitText(text);