简言

通过使用css的animation(动画属性)实现文字显示的打字机效果。

单行

思路

实现步骤：

将文本框属性设置为等宽字体，计算文本框的字数，设置文字大小、相对布局等。
将文本框隐藏，通过动画改变文本框宽度，动画速度曲线使用css内置函数steps()变成步长动画，然后将动画模式设置为forwards,保留动画最后一帧样式。
使用伪元素after，设置边框属性和绝对布局，模拟光标；再使用动画实现若隐若现效果。

代码

这里是用改变宽度和步长动画搭配实现效果。宽度单位是em，数值根据这行文字的多少来计算。

<template><div class="container"><div class="text__box one">这是一个打字机效果1！！！</div><!-- <div class="text__box two">这是一个打字机效果2！！！</div><div class="text__box three">这是一个打字机效果3！！！</div><div class="text__box four">这是一个打字机效果4！！！</div> --></div>
</template>
<script lang="ts" setup>
import { reactive, ref, toRefs, onBeforeMount, onMounted, computed } from "vue";
</script>
<style lang="scss" scoped>
.container {position: relative;margin-top: 100px;margin-left: 100px;
}.text__box {position: relative;overflow: hidden;width: 0;font-size: 32px;line-height: 34px;font-family: "Courier New", Courier, monospace;white-space: nowrap;animation: width 2s steps(13) forwards;&::after {content: "";position: absolute;right: 0px;height: 32px;border-right: 1px solid #000;animation: showInfinite 0.5s infinite both;}
}
.one {animation-delay: 0s;
}@keyframes width {0% {width: 0;}100% {width: 13em; //  单位em,表示一个字体的宽度}
}
@keyframes showInfinite {0% {opacity: 1;}100% {opacity: 0;}
}
</style>

效果

多行

思路

多行打字机实现思路是在单行的基础上进行的。
利用动画延迟属性，来实现单行实现过渡到多行实现的效果。
需要注意的是光标的处理，是最后一行光标才可以无限动画，其他行可以指定光标动画执行次数。

代码

<template><div class="container"><div class="text__box one">这是一个打字机效果1！！！</div><div class="text__box two">这是一个打字机效果2！！！</div><div class="text__box three">这是一个打字机效果3！！！</div><div class="text__box four">这是一个打字机效果4！！！</div></div>
</template>
<script lang="ts" setup>
import { reactive, ref, toRefs, onBeforeMount, onMounted, computed } from "vue";
</script>
<style lang="scss" scoped>
.container {position: relative;margin-top: 100px;margin-left: 100px;
}.text__box {position: relative;overflow: hidden;width: 0;font-size: 32px;line-height: 34px;font-family: "Courier New", Courier, monospace;white-space: nowrap;animation: width 2s steps(13) forwards;&::after {content: "";position: absolute;right: 0px;height: 32px;border-right: 1px solid #000;animation: showInfinite 0.5s 5 both;    //  执行5次}
}
.one {animation-delay: 0s;
}
.two {animation-delay: 2s;&::after {animation-delay: 2s;}
}
.three {animation-delay: 4s;&::after {animation-delay: 4s;}
}
.four {animation-delay: 6s;&::after {animation-delay: 6s;animation: showInfinite 0.5s infinite both;}
}@keyframes width {0% {width: 0;}100% {width: 13em; //  单位em,表示一个字体的宽度}
}
@keyframes showInfinite {0% {opacity: 1;}100% {opacity: 0;}
}
</style>

效果

结语

这里主要运用的是步长动画，另外要注意一行文字的长度，然后根据长度，改变步长。多行打字机也是如此，一般最后一行需要特殊处理。

利用css动画实现打字机效果相关推荐

【实战】用CSS实现文本打字机效果
之前,我们的文章中已经有通过 JS 的方式实现文本打字机的效果了,具体可以看这篇文章: [前端三分钟]利用Javascript实现打字效果在本文中,你将学习如何使用纯CSS实现打字机效果,使网站的文 ...
镜像css3,利用css动画属性rotate来实现镜像翻转_WEB前端开发
layui中使用的一些弹出框_WEB前端开发 Layui是一款采用自身模块规范编写的情怀型前端UI框架,本文就来为大家介绍一下layui中使用的一些弹出框,希望对大家有一定的帮助. 要实现镜像翻转,有 ...
php图片镜像翻转,利用css动画属性rotate来实现镜像翻转
要实现镜像翻转,有两种实现方法: 方法一:利用css动画属性rotate旋转来实现具体代码:.mirrorRotateLevel { transform: rotateY(180deg); /* 水 ...
html5实现立体照片墙效果,利用css制作3D照片墙效果
利用css制作3D照片墙,具体代码如下所示: 无标题文档以上代码是准备工作,在html代码的body主体中放了一个div,里面包着你想要显示在照片墙上的照片,数量可以任意.接着开始着手写样式. bo ...
利用css 动画实现节流
节流指的避免过于频繁的执行一个函数,例如:一个保存按钮,为了避免重复提交或者服务器考虑,往往需要对点击行为做一定的限制,不然会频繁的请求接口,之前基本上是通过js去控制节流问题,其实css也能做到节流 ...
使用css动画实现loding效果
代码如下: <!doctype html> <html><head><meta charset="ulf-8"><title& ...
CSS动画实现心跳效果
CSS动画实现心跳效果简介实现步骤代码效果简介使用CSS动画animation 和tranform(缩放.旋转). 实现步骤添加p元素内容之前/之后插入,一个宽为100px,高为160p ...
利用CSS动画制作 Html 表格数据滚动显示
直接上图看最终实现效果: DataV里有这个效果,看起来高大上,实际自己开发也不难实现.实现的方法很多,下面是本人的一种实现方案,分享给大家. 这个效果需要解决2个问题: 1:首尾的数据衔接: 2:c ...
利用CSS实现文本省略效果
实现文本省略效果,只需为对应元素添加CSS如下: 即可实现效果如下: 转载于:https://www.cnblogs.com/yjpfront-end/p/9580774.html

利用css动画实现打字机效果

简言

单行

思路

代码

效果

多行

思路

代码

效果

结语

利用css动画实现打字机效果相关推荐

最新文章

热门文章