动画文本
实现思路:
- 使用了
css3
的animation
动画属性 - 用
js
将文本拆分为字符数组["今", "天", "不", "学", "习", " ", "~", " ", "明", "天", "变", "垃", "圾", " ", "~", " "]
- 循环数组,创建
span
元素,内容分别设为每个字符,并设置不同的css
属性animationDelay
(动画开始时间) - 最后将
span
元素加入
html部分:
<p class="text">今天不学习 ~ 明天变垃圾 ~ </p>
scss部分:
body {
display: flex;
flex-direction: column;
height: 100vh;
justify-content: center;
align-items: center;
background-color: black;
}
.text {
display: flex;
flex-wrap: wrap;
color: white;
font-family: SimSun, serif;
white-space: pre;
font-size:28px;
span {
animation: textAnimation 1s ease-out both;
}
}
@keyframes textAnimation{
from {
opacity: 0;
transform: translateY(-40%);
}
to {
opacity: 1;
transform: translateY(0);
}
}
js部分:
// 1. 获取DOM元素
let texts = document.querySelectorAll(".text");
// 2. 循环元素
texts.forEach(text => {
// 3. 将元素的文本内容分割成字符数组
let letters = text.textContent.split("");
// 4. 将内容清空
text.textContent = "";
// 5. 循环字符数组
letters.forEach((letter, i) => {
//6. 创建span元素,内容为数组中的字符,设置动画开始时间,最后将元素加入landInText
let span = document.createElement("span");
span.textContent = letter;
span.style.animationDelay = `${i * 0.1}s`;
text.append(span);
});
});
看懂了上面代码后,修改scss
代码里动画部分,又可以产生不同的效果:
举一反N
修改一:
修改部分代码:
.text {
display: flex;
flex-wrap: wrap;
color: white;
font-family: SimSun, serif;
white-space: pre;
font-size:28px;
span {
transform: translateY(100%);
animation: textAnimation 1s forwards; // forwards: 播放完动画,停在定义的最后一帧
}
}
@keyframes textAnimation{
to {
transform: translateY(-12%);
}
}
修改二:
修改部分代码:
.text {
display: flex;
flex-wrap: wrap;
color: rgb(139, 116, 134);
font-family: SimSun, serif;
white-space: pre;
font-size:24px;
font-weight: 600;
span {
padding: 5px;
line-height: 40px;
background: #eca6c3;
animation: textAnimation 2s infinite; // 设置infinite 无限动画即不断循环
}
}
@keyframes textAnimation{
50% {
box-shadow: 0 20px 0 #eee;
transform: translateY(-35px);
}
}
修改三:
修改部分代码:
.text {
display: flex;
flex-wrap: wrap;
color: white;
font-family: SimSun, serif;
white-space: pre;
font-size:28px;
span {
animation: textAnimation 1.5s alternate infinite; // 设置infinite 无限动画即不断循环
}
}
@keyframes textAnimation{
to {
filter: blur(5px);
}
}
修改四:
修改部分代码:
.text {
display: flex;
flex-wrap: wrap;
color: white;
font-family: SimSun, serif;
white-space: pre;
font-size:28px;
span {
animation: textAnimation 2s infinite; // 设置infinite 无限动画即不断循环
}
}
@keyframes textAnimation{
50% {
transform: scale(0);
}
}