纯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制作圆角图片和椭圆形图片
Jul 08 HTML / CSS
浅谈css3新单位vw、vh、vmin、vmax的使用详解
Dec 01 HTML / CSS
CSS3中animation实现流光按钮效果
Dec 21 HTML / CSS
如何使用localstorage代替cookie实现跨域共享数据问题
Apr 18 HTML / CSS
基于html5 canvas实现漫天飞雪效果实例
Sep 10 HTML / CSS
推荐10个HTML5响应式框架
Feb 25 HTML / CSS
HTML5中indexedDB 数据库的使用实例
May 11 HTML / CSS
canvas实现按住鼠标移动绘制出轨迹的示例代码
Feb 05 HTML / CSS
Html5 canvas实现粒子时钟的示例代码
Sep 06 HTML / CSS
HTML5中的Web Notification桌面通知功能的实现方法
Jul 29 HTML / CSS
使用HTML+Css+transform实现3D导航栏的示例代码
Mar 31 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
PHP 如何向 MySQL 发送数据
2006/10/09 PHP
Win2003下APACHE+PHP5+MYSQL4+PHPMYADMIN 的简易安装配置
2006/11/18 PHP
php 购物车实例(申精)
2009/05/11 PHP
PHP判断图片格式的七种方法小结
2013/06/03 PHP
WordPress开发中的get_post_custom()函数使用解析
2016/01/04 PHP
使用php实现从身份证中提取生日
2016/05/09 PHP
PHP将身份证正反面两张照片合成一张图片的代码
2017/04/08 PHP
javascript动态加载二
2012/08/22 Javascript
JS中引用百度地图并将百度地图的logo和信息去掉
2013/09/29 Javascript
一个炫酷的Bootstrap导航菜单
2016/12/28 Javascript
如何使用Bootstrap 按钮实例详解
2017/03/29 Javascript
详解react服务端渲染(同构)的方法
2017/09/21 Javascript
简单的Vue异步组件实例Demo
2017/12/27 Javascript
JavaScript怎样在删除前添加确认弹出框?
2019/05/27 Javascript
微信小程序 轮播图实现原理及优化详解
2019/09/29 Javascript
javascript实现蒙版与禁止页面滚动
2020/01/11 Javascript
详解如何修改 node_modules 里的文件
2020/05/22 Javascript
快速了解Vue父子组件传值以及父调子方法、子调父方法
2020/07/15 Javascript
[04:46]2018年度玩家喜爱的电竞媒体-完美盛典
2018/12/16 DOTA
[59:30]完美世界DOTA2联赛PWL S3 access vs LBZS 第二场 12.20
2020/12/23 DOTA
pip 错误unused-command-line-argument-hard-error-in-future解决办法
2014/06/01 Python
跟老齐学Python之正规地说一句话
2014/09/28 Python
Python中特殊函数集锦
2015/07/27 Python
pycharm+django创建一个搜索网页实例代码
2018/01/24 Python
python爬虫基本知识
2018/03/05 Python
Python Sympy计算梯度、散度和旋度的实例
2019/12/06 Python
Selenium及python实现滚动操作多种方法
2020/07/21 Python
Python中openpyxl实现vlookup函数的实例
2020/10/28 Python
印尼在线旅游门户网站:NusaTrip
2019/11/01 全球购物
大学生实习自我鉴定
2013/12/11 职场文书
大学生学业生涯规划
2014/01/05 职场文书
一年级小学生评语大全
2014/12/25 职场文书
2016春节慰问信范文
2015/03/25 职场文书
工作失职自我检讨书
2015/05/05 职场文书
Mysql如何实现不存在则插入,存在则更新
2022/03/25 MySQL
苹果macOS 13开发者预览版Beta 8发布 正式版10月发布
2022/09/23 数码科技