类似如下效果：
H armony
O ptimize
N ature
E nergy
S ustainability
S olutions
ALL In
HONESS.
可以直接在区块代码编辑器中进行添加。
<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>
