纯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教程(8):CSS3透明度指南
Apr 02 HTML / CSS
8款精美的CSS3表单设计(登录表单/下拉选择/按钮附演示及源码)
Feb 04 HTML / CSS
如何利用CSS3制作3D效果文字具体实现样式
May 02 HTML / CSS
CSS3属性box-sizing使用指南
Dec 09 HTML / CSS
实例讲解CSS3中的border-radius属性
Aug 18 HTML / CSS
详解CSS3 Media Queries中媒体属性的使用
Feb 29 HTML / CSS
移动web模拟客户端实现多方框输入密码效果【附代码】
Mar 25 HTML / CSS
HTML5 canvas基本绘图之绘制曲线
Jun 27 HTML / CSS
HTML块级标签汇总(小篇)
Jul 13 HTML / CSS
HTML5制作表格样式
Nov 15 HTML / CSS
【HTML5】3D模型--百行代码实现旋转立体魔方实例
Dec 16 HTML / CSS
DIV CSS实现网页背景半透明效果
Dec 06 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
IIS下配置Php+Mysql+zend的图文教程
2006/12/08 PHP
关于PHP语言构造器介绍
2013/07/08 PHP
深入解析PHP中逗号与点号的区别
2013/08/05 PHP
PHP防止post重复提交数据的简单例子
2014/06/07 PHP
PHP中读取照片exif信息的方法
2014/08/20 PHP
php上传图片客户端和服务器端实现方法
2015/03/30 PHP
thinkPHP5.0框架配置格式、加载解析与读取方法
2017/03/17 PHP
thinkphp集成前端脚手架Vue-cli的教程图解
2018/08/30 PHP
javascrip关于继承的小例子
2013/05/10 Javascript
jquery的live使用注意事项
2014/02/18 Javascript
jquery.idTabs 选项卡使用示例代码
2014/09/03 Javascript
JavaScript 消息框效果【实现代码】
2016/04/27 Javascript
JS中检测数据类型的几种方式及优缺点小结
2016/12/12 Javascript
JavaScript原生编写《飞机大战坦克》游戏完整实例
2017/01/04 Javascript
基于匀速运动的实例讲解(侧边栏,淡入淡出)
2017/10/17 Javascript
Vue 仿QQ左滑删除组件功能
2018/03/12 Javascript
vue实现文字横向无缝走马灯组件效果的实例代码
2019/04/09 Javascript
微信小程序音乐播放器开发
2019/11/20 Javascript
python实现数通设备端口监控示例
2014/04/02 Python
让Python代码更快运行的5种方法
2015/06/21 Python
Python列表删除的三种方法代码分享
2017/10/31 Python
分析python动态规划的递归、非递归实现
2018/03/04 Python
python中subprocess批量执行linux命令
2018/04/27 Python
python 爬虫一键爬取 淘宝天猫宝贝页面主图颜色图和详情图的教程
2018/05/22 Python
python3 flask实现文件上传功能
2020/03/20 Python
python+openCV利用摄像头实现人员活动检测
2019/06/22 Python
linux中如何使用python3获取ip地址
2019/07/15 Python
关于Keras Dense层整理
2020/05/21 Python
三星法国官方网站:Samsung法国
2019/10/31 全球购物
Yankee Candle官网:美国最畅销蜡烛品牌之一
2020/01/05 全球购物
八年级英语教学反思
2014/01/09 职场文书
电气工程及其自动化专业求职信
2014/06/23 职场文书
关于运动会广播稿200字
2014/10/08 职场文书
廉洁自律准则学习心得体会
2016/01/13 职场文书
职场新人知识:如何制定一份合理的工作计划?
2019/09/11 职场文书
Django展示可视化图表的多种方式
2021/04/08 Python