CSS3动画：动画文本

动画文本

实现思路：

• 使用了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);
    }
  }

推荐阅读：前端实现动画的方法汇总 ٩( ‘ω’ )و