一、前言
今天是最后一天了,撸起袖子加油干。
最近不是openai比较火吗,那我们就来仿照它实现下它的打字机效果吧。
惯例还是先讲思路,和用到的属性或者函数,最后再统一放源码。
二、过程
1、思路
首先是设置字体为等宽字体,即1em等于1字体。
然后是将宽度设为0,并且设置溢出隐藏。
通过css内置函数steps() 变成步长动画, 同时利用border-right属性,生成模拟光标,
同步上一个动画,额外实现一个闪烁效果,来模拟实际光标。
2、关键的部分
setps函数 ,有两个参数, arg1和arg2
arg1 — 表示从0%到100%需要经历多少步。
arg2 — 默认为end,可选填start
end表示在结束时期的赋值,如果播放次数超过1次,那它为默认把0%到第一步变更值作为第一步,
而不会去执行最后一步的赋值,如果只播放1次,那就不存在这个问题,将动画效果设置成forwards就可以了。
start表示在一个周期开始前进行赋值,也就没有了0%到第一步变更这一步了。
根据上面提到的最后一步不执行的问题,其实很好解决,多一步让它被丢弃就可以了。
具体看下面实现。
3、实现
我们设置一个元素,一共有8个字,也就是8em宽度。
```
<h1>欢迎各位掘友们。</h1>
```
css的部分
h1 {
/* 本例8个文字(加标点符号);有多少个文字,width就是多少个em */
width: 9em;
/* 加上两个动画,一个是打字动画,使用steps让字一个一个的出现,
注意step和字数保持一致,然后多一步用来丢弃,光标动画也是同理,*/
animation: typingWords 5s steps(9) infinite, cursor 0.5s steps(1) infinite;
/* 要设置不允许换行,且溢出隐藏 */
white-space: nowrap;
overflow: hidden;
/* 使用右边框作为打印的指针光标 */
border-right: 1px solid #000;
}
@keyframes typingWords {
0% {
width: 0;
}
}
@keyframes cursor {
50% {
border-color: transparent;
}
}
我们的是循环播放的效果,一开始宽度默认为9em, 多了1em是用来给steps函数丢弃用的。
然后不设置动画的100%效果,那就会默认使用原来的样式。
基本上就是扩宽宽度,让字一个一个出现,同时让光标闪烁,形成一种打字的效果。
本文仅限于单行的效果,多行效果可以在此基础上添加。
三、小结
今天的思路比较简单 ,大家有空可以试一试。
ps: 我是地霊殿__三無,希望能帮到你(让我水完这次的日更,最后一天了,日更真的难顶)。
原文链接:https://juejin.cn/post/7231564187255701541 作者:地霊殿__三無