CSS代码:
.typing {
width: 15em;
white-space: nowrap;
border-right: 2px solid transparent;
animation: typing .5s steps(, end), blink-caret .75s step-end infinite;
overflow: hidden;
}
/* 打印效果 */
@keyframes typing {
from { width: ; }
to { width: 15em; }
}
/* 光标闪啊闪 */
@keyframes blink-caret {
from, to { box-shadow: 1px transparent; }
% { box-shadow: 1px ; }
}
HTML代码:
<p class="typing">简易中文打字效果,作者:张鑫旭</p>

原文链接:https://www.zhangxinxu.com/wordpress/2019/01/css-typewriter-effect/

分享张鑫旭大神的,纯css打字小技巧,我顺便收藏一下的更多相关文章

  1. css笔记 - 张鑫旭css课程笔记之 float 篇

    https://www.imooc.com/t/197450float float的设计初衷/原本作用-是为了实现文字环绕效果如,一个图片和一段文字垂直放置,给图片加上浮动,文字就环绕图片展示了. 浮 ...

  2. 视区相关单位vw, vh..简介以及可实际应用场景——张鑫旭

    一.N多的唠哩唠叨 CSS3中一些新的单位早在去年春暖花开的时候就介绍了,参见:CSS长度值及时间.频率.角度单位.显然,其中就提到了本文要感叹的单位vw, vh,见下图: 不过“我看见你”和“我触碰 ...

  3. 算警示吧——此文来自张鑫旭(说说CSS学习中的瓶颈)

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2523 虽已数年,但未 ...

  4. 如何灵活利用免费开源图标字体-IcoMoon篇——张鑫旭

    一.温故知新 之前有专门介绍过如何使用类似fontforge软件制作自定义字符字体以及如何在web中实际应用. 不过,文中提到的是利用系统自带的一些特殊字体,如WINGDNG3.ttf字体. 显然,系 ...

  5. CSS 相对/绝对(relative/absolute)定位系列(四)——张鑫旭

    前三篇(1, 2, 3)都是介绍的absolute属性,终于,轮到本文讲讲relative相对定位. 一.relative属性的形象化思维 relative是个看上去低调,有些特殊才能,气场强大,有着 ...

  6. CSS页面重构“鑫三无准则”之“无图片”准则——张鑫旭

    一.再说关于“鑫三无准则” “鑫三无准则”这个概念貌似最早是在去年的去年一篇名叫“关于Google圆角高光高宽自适应按钮及其拓展”的文章中提过.这是自己在页面重构的经验中总结出来的一套约束自己CSS的 ...

  7. 拜拜了,浮动布局-基于display:inline-block的列表布局——张鑫旭

    一.一抹前言 没有爱的日子,时间如指尖细沙,不知不觉就流逝了.写“CSS float浮动的深入研究.详解及拓展(一)”和“CSS float浮动的深入研究.详解及拓展(二)”似乎就在不久前,然而相隔差 ...

  8. [css]【转载张鑫旭】我是如何对网站CSS进行架构的

    一.写在前面的 都是自己积累形成的一些东西,可能带有明显的个人印记.不是专业内容,不是权威指南,只是展示一点自己的观点,借此希望能与各位优秀的同行交流看法,见解.以得到进步与提高. 二.我所知的一些过 ...

  9. 说说HTML5中label标签的可访问性问题——张鑫旭

    一.开篇叨叨 一般稍微有些经验的页面制作人员都知道label标签可以优雅地扩大表单控件元素的点击区域,例如,单纯的单选框点击区域就鼻屎那么大的地方,经常会点不到位置.因此,label标签的使用对于提高 ...

随机推荐

  1. 通过Shell脚本将VSS项目批量创建并且提交迁移至Gitlab

    脚本运行环境:Git Bash 系统环境:Windows 10 Pro 1709 VSS版本:Microsoft Visual SourceSafe 2005 我的VSS工作目录结构如下: D:\wo ...

  2. GHSpro多数据库连接

    GHSpro多数据库连接 文章 1 数据连接 XXX.Application.Web -> XmlConfig -> database.config <connectionStrin ...

  3. IDEA日常遇到问题汇总

    1. IDEA .gitignore文件不显示在项目栏中 解决方法,setting  >> Editor >> Code Style >> File Type &g ...

  4. Insert 导致死锁的两种情况

    官档原文,懒得翻译了 https://dev.mysql.com/doc/refman/5.7/en/innodb-locks-set.html INSERT sets an exclusive lo ...

  5. HBuilder 模拟器

    模拟器名称    连接默认端口夜神安卓模拟器夜神安卓模拟器     62001逍遥安卓模拟器逍遥安卓模拟器     21503BlueStacks(蓝叠安卓模拟器)BlueStacks(蓝叠安卓模拟器 ...

  6. Gatling实战(三)

    无论是性能测试还是自动化测试,有一个很重要的点就是变量(参数化),因为真实环境是很少同时产生并发很高而且所有参数都一模一样的请求的,就算有这样的接口,开发肯定用缓存来挡了,这种一般不会是瓶颈,真正瓶颈 ...

  7. 富文本编辑器Quill(二)上传图片与视频

    image与video在Quill formats中属于Embeds,要在富文本中插入图片或者视频需要使用insertEmbed api. insertEmbed insertEmbed(index: ...

  8. 持久层Mybatis3底层源码分析,原理解析

    Mybatis-持久层的框架,功能是非常强大的,对于移动互联网的高并发 和 高性能是非常有利的,相对于Hibernate全自动的ORM框架,Mybatis简单,易于学习,sql编写在xml文件中,和代 ...

  9. POJ 2663 Tri Tiling 【状压DP】

    Description In how many ways can you tile a 3xn rectangle with 2x1 dominoes?  Here is a sample tilin ...

  10. Ubuntu 18.04.1安装IntelliJ IDEA

    1.下载安装包 下载地址:https://www.jetbrains.com/idea/download/#section=linux 2.下载完成后,解压到/opt目录 .tar.gz -C /op ...