纯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实现跳动的动画效果
Sep 12 HTML / CSS
网页切图的CSS和布局经验与要点
Apr 09 HTML / CSS
HTML5+CSS3实例 :canvas 模拟实现电子彩票刮刮乐代码
Dec 30 HTML / CSS
HTML5 canvas基本绘图之绘制矩形
Jun 27 HTML / CSS
使用CSS实现弹性视频html5案例实践
Dec 26 HTML / CSS
html5教程制作简单画板代码分享
Dec 04 HTML / CSS
利用HTML5 Canvas API绘制矩形的超级攻略
Mar 21 HTML / CSS
HTML5 video 上传预览图片视频如何设置、预览视频某秒的海报帧
Aug 28 HTML / CSS
深入理解HTML5定时器requestAnimationFrame的使用
Dec 12 HTML / CSS
HTML5实现应用程序缓存(Application Cache)
Jun 16 HTML / CSS
HTML基础详解(下)
Oct 16 HTML / CSS
CSS中理解层叠性及权重如何分配
Dec 24 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
用 Composer构建自己的 PHP 框架之构建路由
2014/10/30 PHP
php实现微信公众平台账号自定义菜单类
2015/10/11 PHP
php版交通银行网银支付接口开发入门教程
2016/09/26 PHP
Laravel6.0.4中将添加计划任务事件的方法步骤
2019/10/15 PHP
php连接mysql之mysql_connect()与mysqli_connect()的区别
2020/07/19 PHP
网站页面自动跳转实现方法PHP、JSP(上)
2010/08/01 Javascript
jquery控制listbox中项的移动并排序的实现代码
2010/09/28 Javascript
jQuery 对Select的操作备忘记录
2011/07/04 Javascript
jquery无缝向上滚动实现代码
2013/03/29 Javascript
js获取和设置属性的方法
2014/02/20 Javascript
JQuery中节点遍历方法实例
2015/05/18 Javascript
js判断手机浏览器操作系统和微信浏览器的方法
2016/04/30 Javascript
javascript 判断一个对象为数组的方法
2017/05/03 Javascript
微信小程序实现点击返回顶层的方法
2017/07/12 Javascript
vue2.0中vue-cli实现全选、单选计算总价格的实例代码
2017/07/18 Javascript
canvas轨迹回放功能实现
2017/12/20 Javascript
小程序云开发实战小结
2018/10/25 Javascript
Vue3.0数据响应式原理详解
2019/10/09 Javascript
解决vue安装less报错Failed to compile with 1 errors的问题
2020/10/22 Javascript
jQuery实现动态操作table行
2020/11/23 jQuery
python操作xml文件示例
2014/04/07 Python
Python实现多线程/多进程的TCP服务器
2019/09/03 Python
python时间日期操作方法实例小结
2020/02/06 Python
Python命名空间namespace及作用域原理解析
2020/06/05 Python
英国森林假期:Forest Holidays
2021/01/01 全球购物
毕业寄语大全
2014/04/09 职场文书
学雷锋志愿者活动方案
2014/08/21 职场文书
2014年医院工作总结
2014/11/20 职场文书
暂住证明怎么写
2015/06/19 职场文书
会计继续教育培训心得体会
2016/01/19 职场文书
职场干货:简历中的自我评价应该这样写!
2019/05/06 职场文书
springboot项目以jar包运行的操作方法
2021/06/30 Java/Android
MySQL8.0升级的踩坑历险记
2021/11/01 MySQL
使用javascript解析二维码的三种方式
2021/11/11 Javascript
Win11 S Mode版本泄露 正式上线后叫做Windows 11 SE
2021/11/21 数码科技
Java 使用类型为Object的变量指向任意类型的对象
2022/04/13 Java/Android