js CSS

使用CSS+JS实现打字效果

使用CSS+JS实现打字效果

Posted by AzirKxs on 2020-11-12
Estimated Reading Time 3 Minutes
Words 809 In Total
Viewed Times

特效展示

制作要领

（1）光标闪烁动画的制作

（2）文字不停变换

（3）循环播放

开始制作

1.网页布局

首先，完成页面的基本结构和布局

1
2
3
4
5
6
7
8
<body>
    <div>
        <!-- 文本内容 -->
        <span class="text"></span>
        <!-- 显示光标 -->
        <span class="line">|</span>
    </div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
* {
    margin: 0;
    padding: 0;
}

body {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: radial-gradient(rgb(77, 193, 197), rgb(1, 141, 255))
}

.text {
    font-size: 40px;
    color: rgb(231, 216, 79);
}

.line {
    font-size: 40px;
}

2.css实现闪烁的光标

使用CSS3 @keyframes 制作一个不断循环的闪烁动画来实现这个效果。

1
2
3
4
5
6
7
8
9
10
11
@keyframes twinkle {

    /* 注意不要使用display */
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

然后为光标设置该动画

1
2
3
4
.line {
    font-size: 40px;
    animation: twinkle 0.6s linear infinite;
}

3.js实现文字变换的基本原理

​ 如何实现文字的变换呢？它的基本原理实际上非常简单，利用定时器，我们让0.1s时出现第一个字，让0.2s时出现第二个字…依次类推~~~

1
2
3
4
5
6
7
8
9
10
11
12
13
//获取相关元素节点
var text = document.getElementsByClassName('text')[0];
//设置文本内容
var word = "每个不曾起舞的日子，都是对生命的辜负！---Kxs（误）";
var t = true;
//基本思路
text.innerHTML = "我";
setTimeout(function(){
text.innerHTML = "我是";
},300);
setTimeout(function(){
text.innerHTML = "我是一";
},600);

4.嵌套循环函数实现

明白了它实现的基本原理后，我们就可以使用循环来实现它了

1
2
3
4
5
for(let i=0;i<=word.length;i++){
	setTimeout(function(){
		text.innerHTML=word.substr(0,i);
},i*100)
}

以上就已经实现了一个一次性的打字效果了！

5.如何循环播放？

基本效果已经完成了，但是还不够完美，我们想让它实现无限循环！

起初我使用了递归，但却因为造成了无限递归而导致了js栈内存溢出，从而使网页完全无法加载了。因为还没有学视频中的async函数，我决定寻找另一种方法，在思考过后，最终决定使用定时器来解决无限循环播放！

具体思路为：

引入一个temp变量为ture，每调用一次就对temp进行一次取反。

接着将正着的效果代码和反着的效果代码封装到一个函数中，加入if判断，当temp为true时执行正着的代码，当temp为false执行反着的代码。

最后我们需要每隔一定的时间反复调用这个方法！

6.完成升级

了解了如何实现循环播放后，我们使用js将它实现！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
      let temp=true;
let setText = function (temp) {
          if (temp) {
              for (let i = 0; i <= word.length; i++) {
                  setTimeout(function () {
                      text.innerHTML = word.substr(0, i);
                  }, i*100);
              }
          } else {
              for (let t = word.length ; t >=0; t--) {
                  setTimeout(function () {
                      text.innerHTML = word.substr(0, t);
                  }, (L-t)*100);

              }
          }
      }
      setText(temp);
       setInterval(function(){
           setText(temp=!temp);
      },L*100+1000);

引用视频：[『JS特效』15分钟两种方式实现不一样的打字机效果_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili](

如果这篇文章对你有帮助，可以bilibili关注一波 ~ ！此外，如果你觉得本人的文章侵犯了你的著作权，请联系我删除~谢谢！

特色标签
js CSS
链友
ESC