纯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的rem属性制作响应式页面布局的要点解析
May 24 HTML / CSS
CSS3制作半透明边框(Facebox)类似渐变
Dec 09 HTML / CSS
css3.0 图形构成实例练习二
Mar 19 HTML / CSS
CSS+jQuery+PHP+MySQL实现的在线答题功能
Apr 25 HTML / CSS
纯CSS3打造属于自己的“小黄人”
Mar 14 HTML / CSS
css3 transform 3d 使用css3创建动态3d立方体(html5实践)
Jan 06 HTML / CSS
html5+css3气泡组件的实现
Nov 21 HTML / CSS
HTML5 Canvas之测试浏览器是否支持Canvas的方法
Jan 01 HTML / CSS
整理HTML5中支持的URL编码与字符编码
Feb 23 HTML / CSS
html5 视频播放解决方案
Nov 06 HTML / CSS
Canvas与图片压缩的示例代码
Nov 28 HTML / CSS
Bootstrap File Input文件上传组件
Dec 01 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
调频问题解答
2021/03/01 无线电
php实现图片缩放功能类
2013/12/18 PHP
浅析PHP编程中10个最常见的错误
2014/08/08 PHP
PHP生成器简单实例
2015/05/13 PHP
PHP6连接SQLServer2005的三部曲
2016/04/15 PHP
LNMP部署laravel以及xhprof安装使用教程
2017/09/14 PHP
PHP unlink与rmdir删除目录及目录下所有文件实例代码
2018/02/07 PHP
javascript 火狐(firefox)不显示本地图片问题解决
2008/07/05 Javascript
javascript一元操作符(递增、递减)使用示例
2013/08/07 Javascript
js动态添加事件并可传参数示例代码
2013/10/21 Javascript
javascript删除数组重复元素的方法汇总
2015/06/24 Javascript
JavaScript根据CSS的Media Queries来判断浏览设备的方法
2016/05/10 Javascript
最棒的Angular2表格控件
2016/08/10 Javascript
详谈jQuery中使用attr(), prop(), val()获取value的异同
2017/04/25 jQuery
nodejs同步调用获取mysql数据时遇到的大坑
2019/03/02 NodeJs
koa2+vue实现登陆及登录状态判断
2019/08/15 Javascript
vue源码中的检测方法的实现
2019/09/26 Javascript
vue导航栏部分的动态渲染实例
2019/11/01 Javascript
Vue快速实现通用表单验证的方法
2020/02/24 Javascript
Python写的一个简单监控系统
2015/06/19 Python
Windows下python2.7.8安装图文教程
2016/05/26 Python
python3新特性函数注释Function Annotations用法分析
2016/07/28 Python
python学生信息管理系统(完整版)
2020/04/05 Python
Django 开发环境配置过程详解
2019/07/18 Python
python自动从arxiv下载paper的示例代码
2020/12/05 Python
解决pycharm修改代码后第一次运行不生效的问题
2021/02/06 Python
Html5 new XMLHttpRequest()监听附件上传进度
2021/01/14 HTML / CSS
会话Bean的种类
2013/11/07 面试题
家长寄语大全
2014/04/02 职场文书
环保公益策划方案
2014/08/15 职场文书
搞笑老公保证书
2015/02/26 职场文书
2015年银行大堂经理工作总结
2015/04/24 职场文书
消防宣传语大全
2015/07/13 职场文书
安装pytorch时报sslerror错误的解决方案
2021/05/17 Python
Python绘制地图神器folium的新人入门指南
2021/05/23 Python
python数字图像处理数据类型及颜色空间转换
2022/06/28 Python