以前要达到类似在电脑上打字的效果，需要 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. 【物联网天线选择攻略】2.4GHz 频段增益天线模块设备选择

     天线模块设备(antenna)是一种能量变换器,它把传输线上传播的导行波,变换成在无界媒介中传播的电磁波,或者进行相反的变换.对于设计一个应用于射频系统中的小功率.短距离的2.4GHz无线收发设备, ...

  2. 分享一个网上搜不到的「Redis」实现「聊天回合制」的方案

    前言 为什么说网上搜不到,因为关于聊天回合制的方案作者本人快把百度搜秃噜了也没找到,好在最终是公司一个关系不错的大佬帮提供了点思路,最终作者将其完整实现了出来. 分享出来大家可以收藏,万一你哪天也碰到 ...

  3. 【主流技术】ElasticSearch 在 Spring 项目中的实践

    前言 ElasticSearch简称es,是一个开源的高扩展的分布式全文检索引擎. 它可以近乎实时的存储.检索数据,其扩展性很好,ElasticSearch是企业级应用中较为常见的技术. 下面和大家分 ...

  4. Spring Security认证器实现

    目录 拦截请求 验证过程 返回完整的Authentication 收尾工作 结论 一些权限框架一般都包含认证器和决策器,前者处理登陆验证,后者处理访问资源的控制 Spring Security的登陆请 ...

  5. SAP 隐式增强 Enhancement point

    1.进入编辑器:SE38/SE37/SE24 Edit-->Enhancement Operations-->Create Option 2.填写相关信息,点击对号. 3.点击Enhanc ...

  6. Freeswitch使用originate转dialplan

    概述 Freeswitch是一款非常好用的开源VOIP软交换平台. 最近在对fs做一些功能测试,测试的过程中产生的一个需求,如何从fs发起呼叫并把后续的呼叫流程转到某一个dialplan上,这样在测试 ...

  7. 【python基础】第11回 数据类型内置方法 02

    本章内容概要 列表内置方法 字典内置方法 元组内置方法 集合内置方法 可变类型与不可变类型 本章内容详细 1.列表内置方法 list 列表在调用内置方法之后不会产生新的值 1.1 统计列表中的数据值的 ...

  8. 10分钟实现dotnet程序在linux下的自动部署

    背景 一直以来,程序署都是非常麻烦且无聊的事情,在公司一般都会有 devops 方案,整个 cicd 过程涉及的工具还是挺多的,搭建起来比较麻烦.那么对于一些自己的小型项目,又不想搭建一套这样的环境, ...

  9. dolphinscheduler简单任务定义及复杂的跨节点传参

    dolphinscheduler简单任务定义及跨节点传参 转载请注明出处 https://www.cnblogs.com/funnyzpc/p/16395094.html 写在前面 dolphinsc ...

  10. Hash 哈希表和算法思路详解

    概述 哈希表是一种可以满足快速查找数据结构,时间复杂度接近O(1). 哈希函数是无限集到有限集的映射. 处理数据量大,查找效率要求高时推荐使用hash容器. 问题: 什么情况下考虑使用哈希容器? 常用 ...