大家好,我是 Just,这里是「设计师工作日常」,今天分享的是使用 css 实现好玩的单行打字机效果,和我一起看看吧。
最新文章通过公众号「设计师工作日常」发布。
目录
整体效果
知识点:
①animation
动画属性中steps()
参数的使用
②animation
多个animation-name
的使用
思路:
使宽度从0变为100%,然后利用 steps() 参数使字符一个一个出现,形成打字机效果。
核心代码部分,简要说明了写法思路;完整代码在最后,可直接复制到本地运行。
核心代码
html 代码
要显示的文字主体。
注意:这里我使用的汉字,一个汉字算2个字符
css 部分代码
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 页面
css 样式
页面渲染效果
以上就是所有代码,以及简单的思路,希望对你有一些帮助或者启发。
我是 Just,这里是「设计师工作日常」,求点赞求关注!