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. SQLSERVER列出所有用户权限

    --服务器级权限WITH CTE AS(SELECT u.name AS 用户名,u.is_disabled AS 是否禁用,g.name as 服务器角色,'√' as 'flag'FROM sys ...

  2. django进阶开发(一)--session

    基于cookie做用户验证时:敏感信息不适合放在cookie中 session依赖cookie session原理 cookie是保存在用户浏览器端的键值对 session是保存在服务器端的键值对 s ...

  3. First Python script

    learn what is api Jailbreak pycharm install requests on pycharm write first request: get, post MFA l ...

  4. leetcode 二进制求和 python

    class Solution: def addBinary(self, a, b): """ :type a: str :type b: str :rtype: str ...

  5. PHP代码-数据爬取(a标签和a标签所对应的内容)

    public function export(){ set_time_limit(1000); // header("Content-type: text/html; charset=utf ...

  6. Powershell获取硬件信息

    1.获取系统的BIOS的信息: Get-WMIObject -Class Win32_BIOS 2.获取内存信息: Get-WMIObject -Class Win32_PhysicalMemory ...

  7. Linux 运维之路

     第一章:Linux必备知识  1.Linux 系统介绍 2.Linux 简单文本处理 3.Linux 组管理.权限 4.Linux vim文档操作 5.Linux 高级文件管理 6.Linux 文件 ...

  8. 升级python2.7, 实现python2.7与python3并存

    由于用到twilio模块, 所以需要升级一下python2, 但是又不想舍弃python2, 于是实现了简单的方法 python 先扔一块依赖 yum install zlib-devel bzip2 ...

  9. 关于Hibernate 连接mysql不能自动建表的问题

    最近看旧书,李刚那本<轻量级J2EE>在讲解hibernate的时候遇到一个问题,就是与mysql连接后,明明配置了自动建表,却老是建不了表,上网查了发现是方言的原因,到底什么是方言?这里 ...

  10. Pycharm在运行过程中,查看每个变量的方法(show variables)跟终端一样显示变量

    点击运行栏的这个灰色向下剪头: 在出现的窗口上,勾选上: 点击OK,重启Pycharm:接着点击Run窗口: 将Run的show variables图标勾选: 然后你就会发现,在右边出现了变量的窗口: