【网站】在WP区块中添加CSS+JS动画

类似如下效果：

可以直接在区块代码编辑器中进行添加。

<p class="has-text-align-left has-text-color"
    style="color:#ffffff61;font-size:72px;font-style:normal;font-weight:700;letter-spacing:-2px;line-height:1;text-transform:uppercase">
    <em>H</em> <strong>armony</strong></p>

例如以上是第一行动画文字的代码，因为在区块中我们给不同的文字设定了不同的标签，我们可以直接在代码中修改后面strong标签的类，改成如下：

<p class="has-text-align-left has-text-color"
    style="color:#ffffff61;font-size:72px;font-style:normal;font-weight:700;letter-spacing:-2px;line-height:1;text-transform:uppercase">
    <em>H</em> <strong class="change-word">armony</strong></p>

这样我们就可以利用CSS+JS动画实现该标签的动画效果。

CSS：

<style>
    .change-word {
        display: inline-block;
        transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
    }
    .hidden {
        opacity: 0;
        transform: translateY(-10px);
    }
</style>

JS：

<script>
    document.addEventListener("DOMContentLoaded", function () {
        const words = [
            ["armony", "ope", "ealth", "appiness"], // H
            ["ptimize", "pportunity", "rganic", "vergreen"], // O
            ["ature", "urture", "eeds", "urturing"], // N
            ["nergy", "arth", "cology", "nvironment"], // E
            ["ustainability", "ynergy", "upport", "olutions"], // S
            ["olutions", "trategy", "uccess", "ymbiosis"] // S
        ];

        function changeWord(index, element, delay) {
            setTimeout(() => {
                element.classList.add("hidden"); // 先隐藏
                setTimeout(() => {
                    let nextWord = words[index].shift();
                    words[index].push(nextWord);
                    element.textContent = nextWord;
                    element.classList.remove("hidden"); // 显示
                }, 400);
            }, delay);
        }

        function startAnimation() {
            let elements = document.querySelectorAll(".change-word");
            let delay = 100;
            elements.forEach((el, index) => {
                setInterval(() => changeWord(index, el, index * delay), 2500);
            });
        }

        startAnimation();
    });
</script>