分享张鑫旭大神的,纯css打字小技巧,我顺便收藏一下
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打字小技巧,我顺便收藏一下的更多相关文章
- css笔记  - 张鑫旭css课程笔记之 float 篇
		
https://www.imooc.com/t/197450float float的设计初衷/原本作用-是为了实现文字环绕效果如,一个图片和一段文字垂直放置,给图片加上浮动,文字就环绕图片展示了. 浮 ...
 - 视区相关单位vw, vh..简介以及可实际应用场景——张鑫旭
		
一.N多的唠哩唠叨 CSS3中一些新的单位早在去年春暖花开的时候就介绍了,参见:CSS长度值及时间.频率.角度单位.显然,其中就提到了本文要感叹的单位vw, vh,见下图: 不过“我看见你”和“我触碰 ...
 - 算警示吧——此文来自张鑫旭(说说CSS学习中的瓶颈)
		
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2523 虽已数年,但未 ...
 - 如何灵活利用免费开源图标字体-IcoMoon篇——张鑫旭
		
一.温故知新 之前有专门介绍过如何使用类似fontforge软件制作自定义字符字体以及如何在web中实际应用. 不过,文中提到的是利用系统自带的一些特殊字体,如WINGDNG3.ttf字体. 显然,系 ...
 - CSS 相对/绝对(relative/absolute)定位系列(四)——张鑫旭
		
前三篇(1, 2, 3)都是介绍的absolute属性,终于,轮到本文讲讲relative相对定位. 一.relative属性的形象化思维 relative是个看上去低调,有些特殊才能,气场强大,有着 ...
 - CSS页面重构“鑫三无准则”之“无图片”准则——张鑫旭
		
一.再说关于“鑫三无准则” “鑫三无准则”这个概念貌似最早是在去年的去年一篇名叫“关于Google圆角高光高宽自适应按钮及其拓展”的文章中提过.这是自己在页面重构的经验中总结出来的一套约束自己CSS的 ...
 - 拜拜了,浮动布局-基于display:inline-block的列表布局——张鑫旭
		
一.一抹前言 没有爱的日子,时间如指尖细沙,不知不觉就流逝了.写“CSS float浮动的深入研究.详解及拓展(一)”和“CSS float浮动的深入研究.详解及拓展(二)”似乎就在不久前,然而相隔差 ...
 - [css]【转载张鑫旭】我是如何对网站CSS进行架构的
		
一.写在前面的 都是自己积累形成的一些东西,可能带有明显的个人印记.不是专业内容,不是权威指南,只是展示一点自己的观点,借此希望能与各位优秀的同行交流看法,见解.以得到进步与提高. 二.我所知的一些过 ...
 - 说说HTML5中label标签的可访问性问题——张鑫旭
		
一.开篇叨叨 一般稍微有些经验的页面制作人员都知道label标签可以优雅地扩大表单控件元素的点击区域,例如,单纯的单选框点击区域就鼻屎那么大的地方,经常会点不到位置.因此,label标签的使用对于提高 ...
 
随机推荐
- Python数据分析Pandas库之熊猫(10分钟二)
			
pandas 10分钟教程(二) 重点发法 分组 groupby('列名') groupby(['列名1','列名2',.........]) 分组的步骤 (Splitting) 按照一些规则将数据分 ...
 - redis的数据持久化策略
			
redis提供了两种不同的持久化方法来将数据存储到硬盘里面.一种方法叫快照,它可以将存在于某一时刻的所有数据都写入硬盘里面.另一种方法叫只追加文件(AOF),它会在执行写命令时,将被执行的写命令复制到 ...
 - 阿里云windows 2008 服务器处理挖矿程序 Miner
			
阿里云盾最近报发现wanacry蠕虫病毒和挖矿进程异常 仔细检查进程后,发现两个奇怪的进程 Eternalblue-2.2.0.exe,winlogins.exe 特别是伪装成 winlogins.e ...
 - 【题解】Luogu P5284 [十二省联考2019]字符串问题
			
原题传送门 我用sa做的本题 (码量似乎有点大) 先对原串建sa 考虑如何建图: 从大到小枚举长度len 先将height中等于len的两个位置在并查集合并起来,将lst也合并(lst是链表) 再将长 ...
 - 自制操作系统Antz(8)——实现内核 (中) 扩展内核
			
Antz系统更新地址: https://www.cnblogs.com/LexMoon/category/1262287.html 在前几天的任务中,我们已经简单实现了MBR,直接操作显示器和硬盘操作 ...
 - 创建作业(JOB)
			
在SQL Server日常需求处理中,会遇到定时执行或统计数据的需求,这时我们可以通过作业(JOB)来处理,从而通过代理的方式来实现数据的自动处理.一下为SQL Server中创建作业的脚本,供大家参 ...
 - windows微信双开
			
下面的代码写到xxx.bat文件中 @echo off start /d "D:\software\WeChat\" WeChat.exe start /d "D:\so ...
 - 多邻国学英语 tips
			
来源: https://www.cnblogs.com/daysme整理了一分多邻国学英语中的相关语法文档. 地方 null 现在完成时 null 反身代词 浓缩的精华:反身代词就是 “XX 自己” ...
 - Go 基准测试
			
文章转载地址:https://www.flysnow.org/2017/05/21/go-in-action-go-benchmark-test.html 什么是基准测试? 基准测试 ...
 - 【GO】【环境配置】
			
1.首先下载GO的安装包:https://golang.org/doc/install#testing 找到上面一个Download超大按钮,找不到的可以不用再看了. 下载完成,安装. 安装成功后,启 ...