纯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文本换行word-wrap解决英文文本超过固定宽度不换行
Oct 10 HTML / CSS
css3弹性盒模型(Flexbox)详细介绍
Oct 08 HTML / CSS
CSS3 重置iphone浏览器按钮input,select等表单元素的默认样式
Oct 11 HTML / CSS
纯css3使用vw和vh实现自适应的方法
Feb 09 HTML / CSS
CSS3动画特效在活动页中的应用
Jan 21 HTML / CSS
CSS3 实现弹跳的小球动画
Oct 26 HTML / CSS
在HTML5 canvas里用卷积核进行图像处理的方法
May 02 HTML / CSS
html5视频常用API接口的实战示例
Mar 20 HTML / CSS
CSS 文字装饰 text-decoration & text-emphasis 详解
Apr 06 HTML / CSS
CSS3 实现的图片悬停的切换按钮
Apr 13 HTML / CSS
CSS 使用 resize 实现图片拖拽切换预览功能(强大功能)
Aug 23 HTML / CSS
什么是css原子化,有什么用?
Apr 24 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
火影忍者:三大瞳力之一的白眼,为什么没有写轮眼那么出色?
2020/03/02 日漫
session 的生命周期是多长
2006/10/09 PHP
PHP 将逗号、空格、回车分隔的字符串转换为数组的函数
2012/06/07 PHP
php取整函数ceil,floo,round的用法及介绍
2013/08/31 PHP
PHP使用PhpSpreadsheet操作Excel实例详解
2020/03/26 PHP
jQuery 位置函数offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft
2010/03/23 Javascript
Jquery each方法跳出循环,并获取返回值(实例讲解)
2013/12/12 Javascript
javasctipt如何显示几分钟前、几天前等
2014/04/30 Javascript
js在数组中删除重复的元素自保留一个(两种实现思路)
2014/08/22 Javascript
JavaScript实战之菜单特效
2016/08/16 Javascript
JS键盘版计算器的制作方法
2016/12/03 Javascript
jQuery阻止移动端遮罩层后页面滚动
2017/03/15 Javascript
详解nodejs中的process进程
2017/03/19 NodeJs
全面解析vue中的数据双向绑定
2017/05/10 Javascript
详解用函数式编程对JavaScript进行断舍离
2017/09/18 Javascript
vue2.0与bootstrap3实现列表分页效果
2017/11/28 Javascript
详解从买域名到使用pm2部署node.js项目全过程
2018/03/07 Javascript
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
2018/03/13 Javascript
vue watch深度监听对象实现数据联动效果
2018/08/16 Javascript
用Vue编写抽象组件的方法
2019/05/06 Javascript
javascript跳转与返回和刷新页面的实例代码
2019/11/20 Javascript
[03:42]2014DOTA2国际邀请赛 第三日比赛排位扑朔迷离
2014/07/12 DOTA
Python单链表的简单实现方法
2014/09/23 Python
python使用for循环计算0-100的整数的和方法
2019/02/01 Python
梅尔频率倒谱系数(mfcc)及Python实现
2019/06/18 Python
Python Numpy中数据的常用保存与读取方法
2020/04/01 Python
python实现与redis交互操作详解
2020/04/21 Python
西班牙网上书店:Casa del Libro
2016/11/01 全球购物
英国简约舒适女装品牌:Great Plains
2018/07/27 全球购物
世界各地的当地人的食物体验:Eatwith
2019/07/26 全球购物
通用自荐信范文
2014/03/14 职场文书
升学宴主持词
2014/04/02 职场文书
金砖之国观后感
2015/06/11 职场文书
php TP5框架生成二维码链接
2021/04/01 PHP
python unittest单元测试的步骤分析
2021/08/02 Python
MySQL中连接查询和子查询的问题
2021/09/04 MySQL