发现一个有趣的东西,就是使用纯CSS代码实现打字机的效果。所谓的打字机效果就是控制一个字符串字符,并且字符串中的每个一个字符一个接着一个的出现。纯CSS实现文字的打印机效果,要用到 animation
顺晟科技
2022-09-13 11:22:08
204
最近在写个人Blog 中间看过很多个人博客的开发 一大部分用的是Hexo框架或者vuePress框架 导入各种主题样式插件等等
但是看多了就会发现 很多博主的个人博客基本都很相似 并没有什么新东西呈现出来 我这里是实话实说 虽然很多相似之处
但是确实是简单易用 对开发者很友好 最近我也在考虑要不要把我的博客换成Hexo框架来写 这都是后话了。 今天主题是说
一个很常见的效果 就是打字机效果 这里附上我博客的视频供各位先参考了解一下
如果视频点不开就访问这个链接吧:vue自动打字机效果 Typewriter
就是类似这样的效果 这里用到的是Typewriter
下面附上代码:
template :
<h5> <p class="typewriter">{{typewriter}}</p> </h5>
data :
<script> export default { data() { return { typewriter: '', i: 0, timer: 0, str: '//输入你要显示的的文本', } },
methods :
methods: { typeing() { if (this.i <= this.str.length) { this.typewriter = this.str.slice(0, this.i++) this.timer = setTimeout(() => { this.typeing() }, 80) } else { clearTimeout(this.timer) } }, }
注意:
以上 喜欢就点个赞再走吧
16
2022-09
16
2022-09
14
2022-09
13
2022-09
11
2021-12
06
2021-11