有趣的css - 打字机动画效果

大家好，我是 Just，这里是「设计师工作日常」，今天分享的是使用 css 实现好玩的单行打字机效果，和我一起看看吧。

《有趣的css》系列最新实例通过公众号「设计师工作日常」发布。

整体效果

知识点：
① animation 动画属性中 steps() 参数的使用
② animation 多个 animation-name 的使用

思路：
使宽度从0变为100%，然后利用 steps() 参数使字符一个一个出现，形成打字机效果。

核心代码部分，简要说明了写法思路；完整代码在最后，可直接复制到本地运行。

核心代码

html 代码

<div class="text51">你好，很高兴遇见你！</div>

要显示的文字主体。
注意：这里我使用的汉字，一个汉字算2个字符

css 部分代码

.text51{width: 0;font-weight: bold;color: #000;white-space: nowrap;border-right: 1px solid rgba(0,0,0,0.4);animation: texteff51 6s steps(10,start) infinite, lineeff51 0.4s steps(2,start) infinite;overflow: hidden;
}
@keyframes texteff51{to{width: 10rem;}
}
@keyframes lineeff51{0%{border-right: 1px solid rgba(0,0,0,0);}100%{border-right: 1px solid rgba(0,0,0,0.4);}
}

1、定义文字主体的样式， white-space: nowrap 让文字不可换行， overflow: hidden 隐藏溢出宽度的内容。

2、定义 texteff51 动画，因为文字主体为10个汉字（包括标点），1个汉字宽度约等于 1 rem，所以这里的关键帧设置 width: 10rem ，然后在 animation 中定义参数 steps(10,start) 让文字内容一个一个出现。

3、定义 lineeff51 动画，让右边框颜色从 rgba(0,0,0,0) 变为 rgba(0,0,0,0.4) 且循环播放，形成光标闪烁效果。

完整代码如下

html 页面

<!DOCTYPE html>
<html lang="zh"><head><meta charset="utf-8"><link rel="stylesheet" href="style.css"><title>打字机动画效果</title></head><body><div class="app"><div class="text51">你好，很高兴遇见你！</div></div></body>
</html>

css 样式

/** style.css **/
.app{width: 100%;height: 100vh;background-color: #ffffff;position: relative;display: flex;justify-content: center;align-items: center;
}
.text51{width: 0;font-weight: bold;color: #000;white-space: nowrap;border-right: 1px solid rgba(0,0,0,0.4);animation: texteff51 6s steps(10,start) infinite, lineeff51 0.4s steps(2,start) infinite;overflow: hidden;
}
@keyframes texteff51{to{width: 10rem;}
}
@keyframes lineeff51{0%{border-right: 1px solid rgba(0,0,0,0);}100%{border-right: 1px solid rgba(0,0,0,0.4);}
}