前言：

　　　    所有实例均来自《CSS揭秘》，该书以平时遇到的疑难杂症为引，提供解决方法，只能说秒极了，再一次刷新了我对CSS的认知

　　　 该书只提供了关键CSS代码，虽然有在线示例代码链接，但访问速度较慢。下面示例代码是我自己写的，若有错误，欢迎指正

　　　 注：我会在最开头附上每个相关示例所需CSS属性链接作为补充，以供查阅和学习

　　　　　 我会在每个示例最后附上书中提供的在线示例代码链接；

　　　　　 我会从书中选择一些css技巧来分享，有兴趣的小伙伴可以去看看这本书，你不会失望的

　　CSS需知：

　　　　　ch长度单位  （ch介绍及实际使用场景）

　　　　　 steps（通俗易懂的steps属性讲解）

　  场景：

　　　　如果让你实现自动打字动效（如下图，想象用键盘在电脑上输入文字的场景）你会怎么做呢？

　　　　　　

　　　　  以前要实现该效果可能需要写较多复杂的JS代码，而且代码较为冗杂，也不利于维护

　　　　

　  解决方法：

　　　　　　只需要借用CSS3新增长度单位ch + steps属性即可

　　　　　　注：建议先看上面css需知中2篇张大神的博文，能帮助你更好的理解

　  Demo

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <style>

            @keyframes typing {

                0% {

                    width: 0;

                }

            }

            @keyframes caret {

                50% {

                    border-right-color: transparent;

                }

            }

            h1 {

                width: 11ch;

                white-space: nowrap;

                overflow: hidden;

                font-weight: bold;

                font-size: 36px;

                font-family: Monaco,monospace,Consolas,"微软雅黑";

                border-right: 10px solid #ccc;

                animation: typing 8s steps(11), caret 1s steps(1) infinite;

            }

        </style>

    </head>

    <body>

        <h1>hello world</h1>

        <h1>0000000000000000000</h1>

    </body>

</html>

　　书中在线实例：http://dabblet.com/gist/b04ab9f41084b0a66960

　　补：ch兼容性（PC端支持不错，IE9及以上和其它主流浏览器都支持，移动端安卓暂不支持，所以更多可能考虑在PC端使用）

　

CSS揭秘—打字动效（四）的更多相关文章

  1. [css]《css揭秘》学习（四）-一个元素实现内圆角边框

    如图所示的圆角边框有两个元素很好实现,用一个元素也可以实现. <html> <head> <meta charset="utf-8"> < ...

  2. svg和css实现波浪动效

    效果: 截图有点模糊~ 实现: <svg教程> //html <body> <svg class="wave-container" xmlns=&qu ...

  3. 从浏览器渲染层面解析css3动效优化原理

    引言 在h5开发中,我们经常会需要实现一些动效来让页面视觉效果更好,谈及动效便不可避免地会想到动效性能优化这个话题: 减少页面DOM操作,可以使用CSS实现的动效不多出一行js代码 使用绝对定位脱离让 ...

  4. [css 揭秘]：CSS揭秘 技巧（四）：边框内圆角

    我的github地址:https://github.com/FannieGirl/ifannie/ 源码都在这上面哦! 喜欢的给我一个星吧 边框内圆角 问题:有时候我们需要一个容器,只在内侧有圆角,而 ...

  5. CSS动效集锦，视觉魔法的碰撞与融合（二）

    引言 长久以来,我认识到.CSS,是存在极限的.正如曾经替你扛下一切的那个男人,也总有他眼含热泪地拼上一切,却也无法帮你做到的事情,他只能困窘地让你看到他的无能为力,怅然若失. 然后和曾经他成长的时代 ...

  6. js+css 动效+1的效果

    点击数值 +1 的动效 vue data:{ timer: null,plus:''// 次数 } method:{ animate(plus) { var _this = this; clearIn ...

  7. [CSS]《CSS揭秘》第四章——视觉效果

    投影 单侧投影 box-shadow:0px 10px 10px -5px black; 邻边投影 box-shadow:10px 10px 10px 2px black; 双侧投影 box-shad ...

  8. css 揭秘-读书笔记

    css 揭秘 [希]Lea verou 著 css 魔法 译 该书涵盖7大主题,47个css技巧,是css进阶必备书籍,开阔思路,探寻更优雅的解决方案.这本书完全用css渲染出的html写成的(布局. ...

  9. CSS揭秘读书笔记 （一）

    CSS揭秘读书笔记      (一) 一.半透明边框 要想实现半透明边框可以使用border: border: 10px  solid  hsla(0,0%,100%,.5); background: ...

随机推荐

  1. git删除远程分支【转】

    本文转载自:https://my.oschina.net/tsingxu/blog/84601 如果不再需要某个远程分支了,比如搞定了某个特性并把它合并进了远程的 master 分支(或任何其他存放  ...

  2. RQNOJ 202 奥运火炬登珠峰：01背包

    题目链接:https://www.rqnoj.cn/problem/202 题意: 登珠峰需要携带a(L)O2和t(L)N2. 有n个气缸可供选择.其中第i个气缸能装下a[i](L)O2和t[i](L ...

  3. Eclipse_配置_00_资源帖

    1.Eclipse常用设置 2.eclipse设置和优化 3.Eclipse在工作中的一些常用设置及快捷键整理 4.Eclipse常用插件下载地址

  4. EmbarassedBirds全体开发人员落泪

    Github (李昆乘,赖展飞) 现阶段还在开发后期,API调试过程中. 本周无法上线. 全体开发人员留下眼泪. 贴上几个功能图, 给大家尝尝鲜吧! 现阶段仍在API调试 因为队员李昆乘经常出去玩没有 ...

  5. hdu1085Holding Bin-Laden Captive!组合问题

    题目连接 题目意思:有单位价值为1 2 5的三种硬币,分别给出他们的数量,求用这些硬币不能组成的最小的价值 解题思路:普通的母函数 普通的母函数: 利用母函数的思想可以解决很多组合问题,下面举例说明: ...

  6. 【POJ 3580】SuperMemo Splay

    题意 给定$n$个数,$m$个询问,每次在$[L,R]$区间加上一个数,或者反转一个区间$[L,R]$,或者循环右移区间$[L,R]$共$T$次,或者在第$x$个数后插入一个数$p$,或者删除第$x$ ...

  7. 机器学习：Selective Search for Object Recognition

    今天介绍 IJCV 2013 年的一篇文章,Selective Search for Object Recognition,这个是后面著名的DL架构 R-CNN 的基础,后续介绍 R-CNN 的时候, ...

  8. javaScript的类型转换

    1.javaScript会自动跟据期望将值进行转换,比如 2.下面表列出了一些javaScript的自动转换,其中粗体字表示了出乎意料的转换情况 3.显示的类型转换 尽管类型可以自动进行一些转换,但是 ...

  9. <十八>UML核心视图动态视图之协作图

    一:协作图 --->描述了对象间交互的一种模式.它通过对象之间的连接和它们相互发送的消息来显示参与交互的对象 --->协作图可以有对象和主角实例,以及描述它们之间关系和交互的连接和消息.通 ...

  10. bzoj 4032 [ HEOI 2015 ] 最短不公共子串 —— 后缀自动机+序列自动机

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4032 序列自动机其实就是每个位置记录一下某字母后面第一个出现位置,为了子序列能尽量长. 对字 ...