正文

纯css实现打字效果

馒头加梨子  2022-02-11  254

关键词：

概述

很早以前就在别人的博客上面看到打字动画了，觉得非常炫酷，以为是用js做的，找了半天也没找到js在哪里。今天看《css揭秘》，碰巧看到书上打字动画的实现了，而且是纯css实现的！我参考这本书把代码记录下来，供以后开发时参考，相信对其他人也有用。

代码

书上的css代码是这样的：

@keyframes typing {
    from { width: 0 } /* 从左到右的动画 */
}
@keyframes caret {
    50% { border-color: transparent; } /* 闪烁动画 */
}
h1 {
    width: 15ch; /* 文本的宽度 */
    overflow: hidden;
    white-space: nowrap;
    border-right: .05em solid;
    animation: typing 6s steps(15),
    caret 1s steps(1) infinite;
}

js实现

有时候，给网页加上css非常不方便，如果写成js插件的形式会方便许多，下面的代码是我把上面的css代码改成插件的形式：

(function() {
  var timing = 15, //设置动画时间，单位为秒
      userClass = "#blog_news_aboutme", //设置动画标签的class
      isEnglish = true; //不支持汉字和英文混合；汉字填false，英文填true

  //添加style标签
  var rule = "@keyframes typing {from { width: 0; } } @keyframes caret {50% { border-color: transparent; } } " + userClass +" {width: 32em; overflow: hidden; white-space: nowrap; border-right: .05em solid; animation: typing " + timing + "s steps(32) infinite, caret 1s steps(1) infinite; }";
  var style = document.createElement('style');
  style.type = 'text/css';
  style.innerHTML = rule;
  document.getElementsByTagName('head')[0].appendChild(style);

  //原生工具函数
  function $$(selector, context) {
  context = context || document;
  var elements = context.querySelectorAll(selector);
  return Array.prototype.slice.call(elements);
  }
  
  //按字数改变动画
  $$('h1').forEach(function(h1) {
  var len = h1.textContent.length + 1, s = h1.style;
  var unit = isEnglish ? 'ch' : 'em';
  s.width = (len + 0.08) + unit;
  s.animationTimingFunction = "steps("+ len +"),steps(1)";
  });
})()

只要按照注释修改timing，userClass和isEnglish这三个参数，然后把js引入到网页中，就可以实现打字效果啦。

具体效果请参考我的博客左上角的公告栏。（只能用PC端看，手机端看不到喔！）

其它

当然，也有大神用js实现了打字效果并做成了插件，具体可以看这个插件termynal。

打字效果动画实现方法

方法一(纯css实现)：html代码：<h1class="typingtyping-item">打字动画打字动画打字动画</h1>css样式：.typing{font-size:1rem;padding-top:6%;margin-bottom:5%;font-weight:normal;letter-spacing:.3rem;-webkit-animation:type 查看详情

纯css实现波浪效果！

一直以来，使用纯CSS实现波浪效果都是十分困难的。因为实现波浪的曲线需要借助贝塞尔曲线。而使用纯CSS的方式，实现贝塞尔曲线，额，暂时是没有很好的方法。当然，借助其他力量（SVG、CANVAS），是可以很轻松的完成所谓的... 查看详情

css内嵌样式实现打字效果

css自动打字效果的实现(代码片段)

阅读目录最终效果index.htmlindex.jsindex.css最终效果index.html<!DOCTYPEhtml><htmllang="en"><head> <metacharset="UTF-8"/> <metaname="viewport"content&# 查看详情

css3实现打字机效果

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title><style> 查看详情

使用纯css代码实现3d旋转效果

参考技术A主要使用CSS中的preserve-3d、perspective属性实现3D效果为了演示效果，将元素居中，body的css设置查看详情

纯css实现吸顶效果

position的属性有哪些？{ position:static; position:relative; position:absolute; position:fixed; position:inherit; position:initial; posit 查看详情

纯html/css实现时钟效果

写了一个小Demo,用html,css渲染的时钟效果:Html代码:<!DOCTYPEhtml><html> <head> <metacharset="utf-8"/> <title>css实现时针</title> <linkrel="stylesheet"href=&quo 查看详情

使用纯css实现波浪效果

有时候我们需要实现水晃动的效果，其实我们可以通过css旋转动画和圆角来实现。首先来2个div,外层div相对定位，内层div绝对定位，内层div大致位于外层div上半部分。外层div设置一个颜色较深的背景色（水的颜色）;内层div颜色设... 查看详情

纯css实现放烟花效果

本文出自：https://www.cnblogs.com/2186009311CFF/p/13093596.html用元素绑定一个class<viewclass="fireWorkBox"></view>class对应的css如下.fireWorkBox{content:‘‘;width:10upx;height:10upx;display:inline-block;//b 查看详情

纯css实现气泡效果

先上代码：div.bubble{position:absolute;margin:0;padding:0;color:#86181d;background-color:#ffdce0;border-color:#cea0a5;display:block;border:1pxsolid;border-radius:4px;padding:2px;}div.bubble::before{content 查看详情

纯css实现3d按钮效果

今天分享一个用纯CSS实现的3D按钮。css巧妙利用了box-shadow来实现3D物体的立体感，当按钮按下的时候再去修改box-shadow和top值。让人感觉有一种按钮被按下的感觉。css代码非常少，如下所示a.css-3d-btn{position:relative;color:rgba(255,255,255,... 查看详情

纯css实现进度条效果

...度条；　　　　斜纹进度条用线性渐变 linear-gradient类实现，原理很好理解，2个参数：　　　　　　1、角度；　　　　　　2、关键点（包含2个参数，1是颜色，2是长度位置）　　　　displ 查看详情

css纯css实现立体摆放图片效果

1. 元素的width/height/padding/margin的百分比基准设置一个元素 width/height/padding/margin的百分比的时候，大家可知道基准是什么？举个栗子： .parent{width:200px;height:100px;}.child{width:80%;height:80%;}.childchild{width: 查看详情

纯css3实现transtion过渡效果

...lio-03.jpg"alt=""><bclass="block"></b></a> 最终实现效果：鼠标划入img上去,b标签以遮罩层的方式出现&nbs 查看详情

cssgames：纯css实现五星评价效果

上图：上代码：<!DOCTYPEhtml><html><head><metacharset="utf-8"><title></title><styletype="text/css">.container{width:150px;height:30px;position:relative;}.containerul{ 查看详情

cssgames：纯css实现五星评价效果

上图：上代码：<!DOCTYPEhtml><html><head><metacharset="utf-8"><title></title><styletype="text/css">.container{width:150px;height:30px;position:relative;}.containerul{ 查看详情

github精选使用纯css实现动画加载效果

...习、实用与各种有趣的内容。本期推荐的是一个使用纯CSS实现动画加载效果的项目——SpinKit。SpinKit通过使用transform和opacity属性实现了包括方块翻转、圆点旋转、圆环缩放和九宫格渐变等10余种动画加载的效果。部分效果代码：... 查看详情