以前要达到类似在电脑上打字的效果，需要 js+html。今天我将介绍一种新方法。本文主要介绍纯 html+css 实现打字效果，有一定的参考价值，大家可以学习一下。提供所有代码，可以直接使用。

一、原理分析

可以将动画看做三个不同的层次：

1.最底层的文字

2.中间挡住文字的背景

3.最上层的光标

文字是静止的，而中间的背景和最上层的光标是动态的。

初始时，背景挡住所有的文字，光标在最左边。

动画进行时，背景和光标以相同的步伐从左往右移动。

动画结束时，背景不再遮挡文字，光标则在最右边闪烁。

这种实现唯一的好处是不需要 js，但缺点是只能用于一行文本，多行文本理论上可以实现，但是比较麻烦。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>Typing effect without js</title>
  8.   <style>
  9.     :root {
  10.       /* number of characters */
  11.       --steps: 345;
  12.       /* animation time */
  13.       --duration: 2.5s;
  14.       --fontSize: 50px;
  15.       --cursorSize: 20px;
  16.     }
  17.     .text {
  18.       color: #333;;
  19.       position: relative;
  20.       display: inline-block;
  21.       font-family: 'Courier New', Courier, monospace;
  22.       font-size: var(--fontSize);
  23.       line-height: 1;
  24.     }
  25.     .text::after {
  26.       content: '';
  27.       width: var(--cursorSize);
  28.       height: var(--fontSize);
  29.       background-color: black;
  30.       z-index: 2;
  31.       position: absolute;
  32.       animation: blink 1s var(--duration) step-end infinite,
  33.       moveCursor var(--duration) steps(var(--steps)) forwards;
  34.     }
  35.     .text::before {
  36.       content: '';
  37.       width: 100%;
  38.       height: var(--fontSize);
  39.       z-index: 1;
  40.       position: absolute;
  41.       background: linear-gradient(#fff, #fff) no-repeat top right;
  42.       animation: showText var(--duration) steps(var(--steps)) forwards;
  43.     }
  44.     /* Cursor blink animation */
  45.     @keyframes blink {
  46.       0% {
  47.         background-color: black;
  48.       }
  49.       50% {
  50.         background-color: transparent;
  51.       }
  52.       100% {
  53.         background-color: black;
  54.       }
  55.     }
  56.     /* Cursor movement animation */
  57.     @keyframes moveCursor {
  58.       0% {
  59.         left: 0%;
  60.       }
  61.       100% {
  62.         left: 100%;
  63.       }
  64.     }
  65.     /* background moving animation */
  66.     @keyframes showText {
  67.       0% {
  68.         background-size: 100% 100%;
  69.       }
  70.       100% {
  71.         background-size: 0% 100%;
  72.       }
  73.     }
  74.   </style>
  75. </head>
  76. <body>
  77. <div class="text">hello,world!</div>
  78. </body>
  79. </htm>

html + css 实现无需 js 的打字效果的更多相关文章

  1. js实现打字效果

    <!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>js typing& ...

  2. CSS内嵌样式实现打字效果

    <style> *{margin:0;padding:0;} @keyframes typing { from { width: 0; } } @keyframes blink-caret ...

  3. 5行代码带你实现一个js的打字效果

    (转载)原文链接:https://juejin.im/post/5ddf55835188257313541581 前言 有次看电影

  4. CSS 实现打字效果

    JS实现 最近做项目的时候需要实现一个字符逐个出现的打字效果,在网上一搜有个不错的jQuery插件Typed.js,效果很赞 <div class="element"> ...

  5. JS打字效果的动态菜单代码分享

    这篇文章主要介绍了JS打字效果的动态菜单,推荐给大家,有需要的小伙伴可以参考下. 这是一款基于javascript实现的打字效果的动态菜单特效代码,分享给大家学习学习. 小提示:浏览器中如果不能正常运 ...

  6. 纯css实现打字效果

    概述 很早以前就在别人的博客上面看到打字动画了,觉得非常炫酷,以为是用js做的,找了半天也没找到js在哪里.今天看<css揭秘>,碰巧看到书上打字动画的实现了,而且是纯css实现的!我参考 ...

  7. JS让网页上文字出现键盘打字的打字效果

    一个挺简单的网页特效:JS让网页上文字出现键盘打字的打字效果实现 演示地址:http://codepen.io/guihailiuli/pen/jPOYMZ 以代码形式实现过程分析: <html ...

  8. 最牛的打字效果JS插件 typing.js

    最新在做公司的一个项目,需要实现一个敲打代码的动画效果,粗意味比较简单,果断自己直接开写,写着写着发现是一个坑.需要支持语法高亮,并不能直接简单的用setTimeout来动态附件innerHTML.苦 ...

  9. js 引入Vue.js实现vue效果

    拆分组件为单个js见:https://www.jianshu.com/p/2f0335818ceb 效果 html <!DOCTYPE html> <html> <hea ...

随机推荐

  1. npm init cabloy背后的故事

    背景 我们知道许多框架会提供一个脚手架工具,我们先下载安装脚手架工具,然后再通过脚手架命令行来创建项目.在npm@6.1.0中引入了npm init <initializer>的语法.简单 ...

  2. sklearn练习1 回归

    from sklearn.svm import SVR from sklearn.pipeline import make_pipeline from sklearn.preprocessing im ...

  3. 腾讯QQ快捷登陆

    腾讯QQ快捷 相关各语言对接qq快捷登录教程 [C#]QQ开放平台(QQ站外登录)_流程和源码示例 j2ee中实现QQ第三方登陆 web实现QQ第三方登录 asp.net网站接入QQ登录 php实现q ...

  4. 谷歌浏览器Chrome官方下载地址

    经常看到朋友的电脑上安装是魔改的谷歌浏览器.这里将谷歌浏览器官方的下载地址放在这里.有需要的朋友可以自己去下载. 下载地址 Chrome最新稳定在线安装版:https://www.google.cn/ ...

  5. 基于MybatisPlus代码生成器（2.0新版本）

    一.模块简介 1.功能亮点 实时读取库表结构元数据信息,比如表名.字段名.字段类型.注释等,选中修改后的表,点击一键生成,代码成即可提现出表结构的变化. 单表快速转化restful风格的API接口并对 ...

  6. Python中的逻辑表达式

    首先要明确一点,Python的逻辑运算符,可以用来操作任何类型的表达式(不局限于Bool类型),且运算后的结果也不一定是Bool类型的,而是其左右其中一个表达式的值 表达式1 and 表达式2 pyt ...

  7. 9.Linux之iptables防火墙

    Linux之iptables防火墙 目录 Linux之iptables防火墙 iptables防火墙概述 netfilter和iptables之间的关系 netfilter iptables ipta ...

  8. word-制作三线表

    找一个表格或插入一个表格, 找到 [设计] [新建表格样式] [将格式应用于: 整个表格] 点击"框线设置"按钮,在弹出的下拉菜单中分别选择 [上框线] 和 [下框线],然后分别设 ...

  9. idea运行Tomcat出现 Address localhost:8080 is already in useAddress localhost:8080 is already in use

    使用IDEA运行 tomcat时出现 Address localhost:8080 is already in use,就很奇怪,我明明只有这一个程序呀,怎么还会被占用.后来想想可能就是被其他进程占用 ...

  10. SAP Word97 Intergration

    *&---------------------------------------------------------------------* *& Report SAPRDEMOW ...