纯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实现背景模糊的三种方式
Mar 09 HTML / CSS
纯CSS3实现圆角效果(含IE兼容解决方法)
May 07 HTML / CSS
css3 position fixed固定居中问题解决方案
Aug 19 HTML / CSS
利用CSS3伪元素实现逐渐发光的方格边框
May 07 HTML / CSS
CSS3 函数技巧 用css 实现js实现的事情(clac Counters Tooltip)
Aug 15 HTML / CSS
canvas基础之图形验证码的示例
Jan 02 HTML / CSS
前端canvas动画如何转成mp4视频的方法
Jun 17 HTML / CSS
html5通过canvas实现刮刮卡效果示例分享
Jan 27 HTML / CSS
关于HTML5 Placeholder新标签低版本浏览器下不兼容的问题分析及解决办法
Jan 27 HTML / CSS
基于HTML5实现类似微信手机摇一摇功能(计算摇动次数)
Jul 24 HTML / CSS
html5清空画布方法(三种)
Oct 16 HTML / CSS
canvas如何绘制钟表的方法
Dec 13 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下载文件,添加响应头的简单实例
2016/09/22 PHP
PHP使用preg_split()分割特殊字符(元字符等)的方法分析
2017/02/04 PHP
jquery的颜色选择插件实例代码
2008/10/02 Javascript
JavaScript 对Cookie 操作的封装小结
2009/12/31 Javascript
ExtJs使用IFrame的实现代码
2010/03/24 Javascript
StringTemplate遇见jQuery冲突的解决方法
2011/09/22 Javascript
javascript 保存文件到本地实现方法
2012/11/29 Javascript
javascript自动恢复文本框点击清除后的默认文本
2016/01/12 Javascript
用JS实现图片轮播效果代码(一)
2016/06/26 Javascript
AngularJs bootstrap搭载前台框架——准备工作
2016/09/01 Javascript
Javascript单例模式的介绍和实例
2016/10/08 Javascript
浅谈在Vue-cli里基于axios封装复用请求
2017/11/06 Javascript
Vue 中使用 CSS Modules优雅方法
2018/04/09 Javascript
基于Angularjs-router动态改变Title值的问题
2018/08/30 Javascript
Ajax请求时无法重定向的问题解决代码详解
2019/06/21 Javascript
[38:54]完美世界DOTA2联赛PWL S2 Rebirth vs LBZS 第一场 11.28
2020/12/01 DOTA
python实现逆波兰计算表达式实例详解
2015/05/06 Python
Python脚本实现自动发带图的微博
2016/04/27 Python
python中(str,list,tuple)基础知识汇总
2018/02/20 Python
Python3之简单搭建自带服务器的实例讲解
2018/06/04 Python
python 获取url中的参数列表实例
2018/12/18 Python
在pycharm中设置显示行数的方法
2019/01/16 Python
python+opencv像素的加减和加权操作的实现
2019/07/14 Python
查看keras各种网络结构各层的名字方式
2020/06/11 Python
解决Python 函数声明先后顺序出现的问题
2020/09/02 Python
IE兼容css3圆角的实现代码
2011/07/21 HTML / CSS
详解HTML5布局和HTML5标签
2020/10/26 HTML / CSS
大学毕业感言一句话
2014/02/06 职场文书
收银出纳员岗位职责
2014/02/23 职场文书
机关办公室岗位职责
2014/04/16 职场文书
排查整治工作方案
2014/06/09 职场文书
优质服务口号
2014/06/11 职场文书
2015年高校图书馆工作总结
2015/04/30 职场文书
利用html+css实现菜单栏缓慢下拉效果的示例代码
2021/03/30 HTML / CSS
jquery插件实现代码雨特效
2021/04/24 jQuery
MySQL性能指标TPS+QPS+IOPS压测
2022/08/05 MySQL