纯html+css实现打字效果


Posted in HTML / CSS onAugust 02, 2021

本文主要介绍了纯html+css实现打字效果,具有一定的参考价值,感兴趣的可以了解一下

效果图

纯html+css实现打字效果

分析
 

可以将动画看做三个不同的层次:

  • 最底层的文字
  • 中间挡住文字的背景
  • 最上层的光标

文字是静止的,而中间的背景和最上层的光标是动态的。
初始时,背景挡住所有的文字,光标在最左边。
动画进行时,背景和光标以相同的步伐从左往右移动。
动画结束时,背景不再遮挡文字,光标则在最右边闪烁。

纯html+css实现打字效果

代码
 

html
 

<div class="text">hello,world!</div>

css
 

:root {
    /* 字符数量 */
    --steps: 12;
    /* 动画时间 */
    --duration: 2.5s;
    /* 字体大小 */
    --fontSize: 50px;
    /* 光标大小 */
    --cursorSize: 20px;
}

.text {
    color: #333;;
    position: relative;
    display: inline-block;
    font-family: 'Courier New', Courier, monospace;
    font-size: var(--fontSize);
    line-height: 1;
}

.text::after {
    content: '';
    width: var(--cursorSize);
    height: var(--fontSize);
    background-color: black;
    z-index: 2;
    position: absolute;
    animation: blink 1s var(--duration) step-end infinite,
               moveCursor var(--duration) steps(var(--steps)) forwards;
}

.text::before {
    content: '';
    width: 100%;
    height: var(--fontSize);
    z-index: 1;
    position: absolute;
    background: linear-gradient(#fff, #fff) no-repeat top right;
    animation: showText var(--duration) steps(var(--steps)) forwards;
}

/* 光标闪烁动画 */
@keyframes blink {
    0% {
        background-color: black;
    }
    50% {
        background-color: transparent;
    }
    100% {
        background-color: black;
    }
}

/* 光标移动动画 */
@keyframes moveCursor {
    0% {
        left: 0%;
    }
    100% {
        left: 100%;
    }
}

/* 背景移动动画 */
@keyframes showText {
    0% {
        background-size: 100% 100%;
    }
    100% {
        background-size: 0% 100%;
    }
}

注意
字体必须是等宽字体。因为光标每次移动的距离是是根据字符的数量 / 总宽度来决定的。
 

在线演示
 

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

 
HTML / CSS 相关文章推荐
CSS3制作翻转效果_动力节点Java学院整理
Jul 11 HTML / CSS
button在IE6/7下的黑边去除方案
Dec 24 HTML / CSS
HTML5+CSS3实例 :canvas 模拟实现电子彩票刮刮乐代码
Dec 30 HTML / CSS
webapp字号大小跟随系统字号大小缩放的示例代码
Dec 26 HTML / CSS
HTML5 实现一个访问本地文件的实例
Dec 13 HTML / CSS
html5 的a标签 Href 拨电话的写法
Nov 04 HTML / CSS
用html5实现语音搜索框的方法
Mar 18 HTML / CSS
html5读取本地文件示例代码
Apr 22 HTML / CSS
HTML5 Canvas+JS控制电脑或手机上的摄像头实例
May 03 HTML / CSS
HTML table 表格边框的实现思路
Oct 12 HTML / CSS
CSS预处理框架——Stylus
Apr 21 HTML / CSS
flex弹性布局详解
Mar 20 HTML / CSS
html form表单基础入门案例讲解
Jul 21 #HTML / CSS
带你了解CSS基础知识,样式
Jul 21 #HTML / CSS
CSS实现隐藏搜索框功能(动画正反向序列)
Jul 21 #HTML / CSS
详解CSS3.0(Cascading Style Sheet) 层叠级联样式表
html5实现点击弹出图片功能
Jul 16 #HTML / CSS
纯CSS3实现div按照顺序出入效果
CSS3中Animation实现简单的手指点击动画的示例
You might like
php db类库进行数据库操作
2009/03/19 PHP
thinkphp实现多语言功能(语言包)
2014/03/04 PHP
分享十款最出色的PHP安全开发库中文详细介绍
2015/03/22 PHP
PHP环境中Memcache的安装和使用
2015/11/05 PHP
php类自动装载、链式操作、魔术方法实现代码
2017/07/23 PHP
YII2框架中使用RBAC对模块,控制器,方法的权限控制及规则的使用示例
2020/03/18 PHP
js 判断脚本加载完毕的代码
2011/07/13 Javascript
onclick与listeners的执行先后问题详细解剖
2013/01/07 Javascript
js中创建对象的几种方式示例介绍
2014/01/26 Javascript
JavaScript中如何使用cookie实现记住密码功能及cookie相关函数介绍
2016/11/10 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
2016/12/29 Javascript
深入理解Angularjs中的$resource服务
2016/12/31 Javascript
Node.js+ES6+dropload.js实现移动端下拉加载实例
2017/06/01 Javascript
Vue组件通信的四种方式汇总
2018/02/08 Javascript
关于Webpack dev server热加载失败的解决方法
2018/02/22 Javascript
jQuery中的$是什么意思及 $. 和 $().的区别
2018/04/20 jQuery
vue.js实现的经典计算器/科学计算器功能示例
2018/07/11 Javascript
JavaScript引用类型Object常见用法实例分析
2018/08/08 Javascript
vue+element+Java实现批量删除功能
2019/04/08 Javascript
17道题让你彻底理解JS中的类型转换
2019/08/08 Javascript
Layui点击图片弹框预览的实现方法
2019/09/16 Javascript
Python中的元类编程入门指引
2015/04/15 Python
用生成器来改写直接返回列表的函数方法
2017/05/25 Python
Python 解决相对路径问题:&quot;No such file or directory&quot;
2020/06/05 Python
Python文件操作及内置函数flush原理解析
2020/10/13 Python
简述Html5 IphoneX 适配方法
2018/02/08 HTML / CSS
HTML5去掉输入框type为number时的上下箭头的实现方法
2020/01/03 HTML / CSS
世界首屈一指的在线男士内衣权威:HisRoom
2017/08/05 全球购物
美国鲜花递送:UrbanStems
2021/01/04 全球购物
工程造价管理专业大专生求职信
2013/10/06 职场文书
本科毕业生自我鉴定
2013/11/02 职场文书
入党积极分子自我鉴定范文
2014/03/25 职场文书
锦旗标语大全
2014/06/23 职场文书
大学教师师德师风演讲稿
2014/08/22 职场文书
2019送给家人们的中秋节祝福语
2019/08/15 职场文书
MySQL COUNT函数的使用与优化
2021/05/10 MySQL