前言：好看的标题动画实现。
效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
height: 100vh;
background: #000;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
p:nth-child(1) {
color: red;
}
p:nth-child(2) {
color: yellow;
}
p:nth-child(3) {
color: blue;
}
.title {
display: flex;
font-size: 42px;
text-transform: uppercase;
letter-spacing: 5px;
transform: rotate(-10deg);
}
.title span {
opacity: 0;
text-shadow: 1px 1px #533d4a, 2px 2px #533d4a, 3px 3px #533d4a, 4px 4px
#533d4a, 5px 5px #533d4a, 6px 6px #533d4a;
transform: skew(-10deg);
animation: move 1s var(--d) cubic-bezier(0.25, 0.1, 0.57, 1.31) forwards;
}
@keyframes move {
from {
opacity: 0;
transform: skew(-10deg) translateY(300%);
}
to {
opacity: 1;
transform: skew(-10deg) translateY(0);
}
}
</style>
</head>
<body>
<p class="title">这是一个标题哦</p>
<p class="title">这是一个标题哦</p>
<p class="title">这是一个标题哦</p>
</body>
<script>
const ps = document.querySelectorAll(".title");
ps.forEach((p) => {
const result = p.textContent
.split("")
.map((letter) => `<span>${letter}</span>`)
.join(``);
p.innerHTML = result;
});
const spans = document.querySelectorAll(".title span");
for (let i = 0; i < spans.length; i++) {
spans[i].style.setProperty("--d", i * 0.2 + "s");
}
</script>
</html>
