纯CSS打字动画的实现示例


Posted in HTML / CSS onAugust 05, 2022

在一些技术网站中,经常会看到这样一种展示效果:逐个显示一段文本中的字符,模拟出一种打字的效果。通过这种方式可以显著地提升网页设计感。

在大部分应用中,都是通过使用 JS 脚本实现该方案,虽然效果很好,但是对于使用 JS 来操作出表现层的展示,总感觉有点奇怪,所以尝试下只使用 CSS 来实现我们的打字动画~

通过CSS,无法实现像 JS 那样一个字一个字的绘制在页面上,那不如就换一个思路,让容器宽度成为动画的主体,让文字逐渐显示出来。具体来说,最开始容器的宽度是0,随着动画的推进,一个字一个字的扩张到它应用的宽度。(需要注意,该方案仅适用于单行文本)

按照我们预想的思路,很容易完成下述代码。

@keyframes typing {
    from {
        width: 0;
    }
}

h1 {
    width: 188px;
    animation: typing 8s;
    white-space: nowrap;
    overflow: hidden;
}

纯CSS打字动画的实现示例

但是从实现效果上看,并不是那么理想,我们需要的动画效果是逐字呈现而不是这样的平滑显示。

对于这个问题,很显然,我们会想到使用 steps() 来修复,但是具体需要分多少步又是摆在我们面前的另一个难题。

要解决这个问题,就需要说到 ch 这个 CSS 中基本用不到的长度单位,它代表元素所用字体中“0”这一字形的宽度,如果使用的是等宽字体的话,那么“0”字形的宽度和其他所有字形的宽度是一样的,所以很容易想到要解决上述问题,其实只要:

  • 将元素文字设置为等宽字体(实际上,应用打字动效的文字都场景大多是为展示代码的形式,大部分情况下也都是使用都等宽字体)
  • 元素的 width 设置为该元素中文字的个数
  • 同样,将 animationsteps() 也设置为元素的个数
@keyframes typing {
    from {
        width: 0;
    }
}

h1 {
    font-family: "Cascadia Code", Menlo, Monaco, "Courier New", monospace;
    width: 12ch;
    animation: typing 8s steps(12);
    white-space: nowrap;
    overflow: hidden;
}

纯CSS打字动画的实现示例

已经基本实现我们想要的效果了,最后只要加上一个闪烁的光标即可。可以通过使用伪元素生成光标,并通过 opacity 属性来实现闪烁效果:

@keyframes caret {
    50% {
        opacity: 0;
    }
}

h1::after {
    content: "";
    position: absolute;
    right: 0;
    width: 2px;
    top: 6px;
    bottom: 6px;
    background: #000;
    animation: caret 1s steps(1) infinite;
}

到此这篇关于纯CSS打字动画的实现示例的文章就介绍到这了,更多相关CSS打字动画内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
CSS3教程:新增加的结构伪类
Apr 02 HTML / CSS
css3绘制天猫logo实现代码
Nov 06 HTML / CSS
发现两个有趣的CSS3动画效果
Aug 14 HTML / CSS
css图标制作教程制作云图标
Jan 19 HTML / CSS
纯css3实现图片翻牌特效
Mar 10 HTML / CSS
全方位了解CSS3的Regions扩展
Aug 07 HTML / CSS
HTML5 用动画的表现形式装载图像
Mar 08 HTML / CSS
html5嵌入内容_动力节点Java学院整理
Jul 07 HTML / CSS
鲜为人知的HTML5语音合成功能
May 17 HTML / CSS
简单整理HTML5的基本特性和语法
Feb 18 HTML / CSS
canvas画图被放大且模糊的解决方法
Aug 11 HTML / CSS
AmazeUI 手机版页面的顶部导航条Header与侧边导航栏offCanvas的示例代码
Aug 19 HTML / CSS
新的CSS 伪类函数 :is() 和 :where()示例详解
前端使用svg图片改色实现示例
Jul 23 #HTML / CSS
详解flex:1什么意思
Jul 23 #HTML / CSS
CSS子盒子水平和垂直居中的五种方法
Jul 23 #HTML / CSS
如何用H5实现好玩的2048小游戏
Jul 23 #HTML / CSS
css让页脚保持在底部位置的四种方案
Jul 23 #HTML / CSS
浅谈为什么我的 z-index 又不生效了
Jul 15 #HTML / CSS
You might like
dhtmlxTree目录树增加右键菜单以及拖拽排序的实现方法
2013/04/26 PHP
eaglephp使用微信api接口开发微信框架
2014/01/09 PHP
php通过smtp邮件验证登陆的方法
2016/05/11 PHP
laravel 5.1下php artisan migrate的使用注意事项总结
2017/06/07 PHP
php 多继承的几种常见实现方法示例
2019/11/18 PHP
JavaScript高级程序设计
2006/12/29 Javascript
用jscript实现列出安装的软件列表
2007/06/18 Javascript
jquery按回车提交数据的代码示例
2013/11/05 Javascript
jQuery的each终止或跳过示例代码
2013/12/12 Javascript
JavaScript获取表单内所有元素值的方法
2015/04/02 Javascript
JS和css实现检测移动设备方向的变化并判断横竖屏幕
2015/05/25 Javascript
详解AngularJS中的依赖注入机制
2015/06/17 Javascript
基于jQuery实现Ajax验证用户名是否存在实例
2016/03/30 Javascript
Bootstrap轮播插件使用代码
2016/10/11 Javascript
PHP获取当前页面完整URL的方法
2016/12/02 Javascript
Angular4 中内置指令的基本用法
2017/07/31 Javascript
Node.js API详解之 dns模块用法实例分析
2020/05/15 Javascript
[03:03]2014DOTA2西雅图国际邀请赛 Alliance战队巡礼
2014/07/07 DOTA
[03:01]完美盛典趣味短片 DOTA2年度最佳&拉胯英雄
2019/12/07 DOTA
Python使用Matplotlib实现雨点图动画效果的方法
2017/12/23 Python
pytorch训练imagenet分类的方法
2018/07/27 Python
python3对接mysql数据库实例详解
2019/04/30 Python
Django后端接收嵌套Json数据及解析详解
2019/07/17 Python
python tqdm实现进度条的示例代码
2020/11/10 Python
个性化皮包、小袋、生活配件:Mon Purse
2019/03/26 全球购物
班主任与学生安全责任书
2014/07/25 职场文书
党的群众路线教育实践活动查摆问题自查报告
2014/10/10 职场文书
同步小康驻村工作简报
2015/07/20 职场文书
2015重阳节敬老活动总结
2015/07/29 职场文书
考生诚信考试承诺书(2016版)
2016/03/25 职场文书
高中班主任工作总结(范文)
2019/08/20 职场文书
MySQL入门命令之函数-单行函数-流程控制函数
2021/04/05 MySQL
springboot项目以jar包运行的操作方法
2021/06/30 Java/Android
python 标准库原理与用法详解之os.path篇
2021/10/24 Python
python数字图像处理:图像简单滤波
2022/06/28 Python
MySQL常用慢查询分析工具详解
2022/08/14 MySQL