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

一、原理分析

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

1.最底层的文字

2.中间挡住文字的背景

3.最上层的光标

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

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

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

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

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

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Typing effect without js</title>

  <style>

    :root {

      /* number of characters */

      --steps: 345;

      /* animation time */

      --duration: 2.5s;

      --fontSize: 50px;

      --cursorSize: 20px;

    }

    .text {

      color: #333;;

      position: relative;

      display: inline-block;

      font-family: 'Courier New', Courier, monospace;

      font-size: var(--fontSize);

      line-height: 1;

    }

    .text::after {

      content: '';

      width: var(--cursorSize);

      height: var(--fontSize);

      background-color: black;

      z-index: 2;

      position: absolute;

      animation: blink 1s var(--duration) step-end infinite,

      moveCursor var(--duration) steps(var(--steps)) forwards;

    }

    .text::before {

      content: '';

      width: 100%;

      height: var(--fontSize);

      z-index: 1;

      position: absolute;

      background: linear-gradient(#fff, #fff) no-repeat top right;

      animation: showText var(--duration) steps(var(--steps)) forwards;

    }

    /* Cursor blink animation */

    @keyframes blink {

      0% {

        background-color: black;

      }

      50% {

        background-color: transparent;

      }

      100% {

        background-color: black;

      }

    }

    /* Cursor movement animation */

    @keyframes moveCursor {

      0% {

        left: 0%;

      }

      100% {

        left: 100%;

      }

    }

    /* background moving animation */

    @keyframes showText {

      0% {

        background-size: 100% 100%;

      }

      100% {

        background-size: 0% 100%;

      }

    }

  </style>

</head>

<body>

<div class="text">hello,world!</div>

</body>

</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. LVGL库入门教程02-基本控件与交互

    LVGL 本质上是一个 GUI 库,它包含大量的控件(widget),即按钮.标签.滑块.菜单栏这种具有一定人机交互特征的组合图形.LVGL 在设计时,采用了一定面向对象编程的设计思路,有效降低了代码 ...

  2. .Net Core 企业微信更新模版卡片消息

    1.搭建回调服务器 可参考:https://www.cnblogs.com/zspwf/p/16381643.html进行搭建 2.编写代码 2.1接口定义 应用可以发送模板卡片消息,发送之后可再通过 ...

  3. 一篇文章带你使用Typescript封装一个Vue组件

    一.搭建项目以及初始化配置 vue create ts_vue_btn 这里使用了vue CLI3自定义选择的服务,我选择了ts.stylus等工具.然后创建完项目之后,进入项目.使用快捷命令code ...

  4. 关于升级最新版本node.js你知道多少？

    1.先检查版本 node -v 2.清除缓存 npm cache clean -f 3.全局安装管理node.js版本工具 npm install -g n 4.确认安装最新版本 n stable 5 ...

  5. 一篇文章讲清楚MySQL的聚簇/联合/覆盖索引、回表、索引下推

    迎面走来了你的面试官,身穿格子衫,挺着啤酒肚,发际线严重后移的中年男子. 手拿泡着枸杞的保温杯,胳膊夹着MacBook,MacBook上还贴着公司标语:"加班使我快乐". 面试官: ...

  6. 3. Caller 服务调用 - dapr

    前言 上一篇我们讲了使用HttpClient的方式调用,那么如果我们现在需要更换为通过dapr实现服务调用,我们需要做哪些事情呢? Caller.Dapr 入门 如果我们的项目原本使用的是Caller ...

  7. lerna源码阅读

    能够找到入口文件 能够本地调试

  8. 项目git commit时卡主不良代码：husky让Git检查代码规范化工作

    看完 <前端规范之Git工作流规范(Husky + Commitlint + Lint-staged) https://www.cnblogs.com/Yellow-ice/p/15349873 ...

  9. 4-1 Spring框架基础知识

    Spring框架基础知识 1.Spring 框架作用 主要解决了创建对象和管理对象的问题. 自动装配机制 2.Spring 框架 (Spring容器,JavaBean容器,Bean容器,Spring容 ...

  10. day08 集合API | 遍历_ | 泛型 |增强For循环

    集合(续) 集合间的操作 集合提供了如取并集,删交集,判断包含子集等操作 package collection; import java.util.ArrayList; import java.uti ...