主要利用CSS3-animation + JS实现效果，只是提供思路，具体细节可以参考实现效果：

css3-animation属性,可实现动画效果，如下：

[CSS] 纯文本查看 复制代码

?

.demo{

animation: 动画1,动画2;

}上面可以实现动画效果，但是不可控制，只能自动播放，于是看下面：

[JavaScript] 纯文本查看 复制代码

?

// 灵动岛对应dom

const box = document.querySelector(".demo");

// 以类名定义所有动画类型，以类名切换，实现动画切换

const animationList = ["longer", "pide", "fusion", "bigger"];

box.addEventListener("click", () => {

box.classList.add(animationList[index]);

});

let index = 0;

// 每一个动画结束都会触发此事件（包括子元素及不同属性的动画结束时）

box.addEventListener("animationend", (e) => {

if (

e.animationName === "pide-right" ||

e.animationName === "fusion-right"

) {

return;

}

index++;

setTimeout(() => {

if (index {

box.classList.add(animationList[index]);

});

let index = 0;

// 每一个动画结束都会触发此事件（包括子元素及不同种类属性的动画）

box.addEventListener("animationend", (e) => {

if (

e.animationName === "pide-right" ||

e.animationName === "fusion-right"

) {

return;

}

index++;

setTimeout(() => {

if (index