<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0px;
margin: 0px;
}
body {
width: 300vh;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #34495e;
}
div {
font-size: 3em;
font-weight: bold;
text-transform: uppercase;
color: #9b599b;
}
div>span {
position: relative;
display: inline-block;
}
.color {
animation-name: color;
animation-duration: 1s;
animation-iteration-count: 2;
animation-timing-function: linear;
animation-direction: alternate;
}
@keyframes color {
50% {
color: #f1c40f;
transform: scale(2);
}
to {
color: #e7c3ce;
transform: scale(0.5);
}
}
</style>
</head>
<body>
<div>shihuayingkejishukejifazhanyouxiangongsi</div>
</body>
<script>
{
let divs = document.querySelector("div")
// console.log(divs.textContent)
let arrDiv = [...divs.textContent] //获取文本内容
console.log(arrDiv)
arrDiv.reduce((pre, cur, index) => { //reduce方法循环
if (pre === index) {
divs.innerHTML = ''
}
let span = document.createElement("span")//获取拆分后的文本添加标签
span.innerHTML = cur
divs.appendChild(span)
span.addEventListener("mouseover", () =>
span.classList.add("color"),
console.log(pre, cur)
)
// 监听动画结束 移除类
span.addEventListener("animationend", function () {
span.classList.remove("color")
})
}, 0)
}
</script>
</html>
特别感谢后盾人,学习更多前端知识请登录后盾人