CSS打字效果

最新推荐文章于 2024-06-03 11:33:40 发布

夜☞

最新推荐文章于 2024-06-03 11:33:40 发布

阅读量304

点赞数 2

分类专栏： JavaScript 事件高级 JavaScript基础 CSS 文章标签： CSS javascript keyframes 随手做

本文链接：https://blog.csdn.net/qq_41853417/article/details/119562814

版权

CSS 同时被 3 个专栏收录

12 篇文章 0 订阅

订阅专栏

JavaScript 事件高级

6 篇文章 0 订阅

订阅专栏

JavaScript基础

4 篇文章 0 订阅

订阅专栏

前言

首先我们想象一下我们打字的场景，字母会一个接一个的出来。今天我们的目的就是实现这个效果

注意

在项目中核心代码为animation，此属性在Internet Explorer 9以及更早的版本不支持 animation 属性。

简易版只是用CSS

让我们开始吧

我们的文件目录为
在这里插入图片描述

开始工作

首先我们新建文件给予一个h1标签，使用flex布局将其居中

<!-- index.html -->
<!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">
  <link rel="stylesheet" type="text/css" href="css/index.css">
  <title>打字特效</title>
</head>
<body>
  <h1>MrYangjianxin</h1>
</body>
</html>

:root 这个 CSS 伪类匹配文档树的根元素。对于 HTML 来说，:root 表示 <html> 元素，除了优先级更高之外，与 html 选择器相同。

/* index.css */
:root{
  font-size: 20px;
}

body{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

效果如下

在这里插入图片描述

统一标准

扩展

为了统一不同编辑器，我们一致使用monospace字体
接下来我们引入一种单位ch是一个相对于数字0的大小。1ch 就是数字 0 的宽度。
再使用animation属性调用过 @keyframes 规则，创建动画效果，在@keyframes我们可以有两种方式规定动画：以百分比来规定改变发生的时间，或者通过关键词 “from” 和 “to”，等价于 0% 和 100%。
0% 是动画的开始时间，100% 动画的结束时间。

新增CSS代码

/* index.css */
h1{
  font-size: 6rem;
  margin: 0;
  padding: 0;
  font-family: monospace;
  width: 2ch;
  overflow: hidden;
  animation: 2s typing steps(13,jump-none) forwards;
  -webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
}

@keyframes typing{
  from{
    width: 1ch;
  }
  to{
    width: 13ch;
  }
}
@-webkit-keyframes mymove /*Safari and Chrome*/
{
from {left:0px;}
to {left:200px;}
}

简易版的效果就已经完成
请添加图片描述

进阶版制作更加流畅和新的效果

首先我们回到准备阶段，内容居中

效果预想

首先，字体会像简易版这样逐步出现，我们在这上面使得更优化，再者当我们到大写字母时会使得有停顿效果，让我们更接近手打字感觉，添加光标，打字时不闪烁，字体显示完开始循环闪烁。

首先设计光标

我们这里使用after伪类在字体结尾添加光标效果

/* index.css */
h1 {
  position: relative;
}
h1::after {
  content: '';
  display: inline-block;
  position: absolute;
  width: 20px;
  height: 6rem;
  background-color: #000;
  border-radius: 2px;
  right: -30px;
}

在这里插入图片描述

接下来我们要让光标闪烁起来

/* index.css */
h1{
  animation: 1.1s cursor steps(2, jump-none) infinite;
}
@keyframes cursor {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

在这里插入图片描述

打字效果

我们想实现每一个字都有滑动的效果，这个时候我们需要给每个字母添加一个span标签

<!-- index.html -->
<!-- idnex.html引入js文件-->
<!-- 注意，如果在本地引用js文件，单纯的引用我们应该将引入文件放置在最后，如果使用异步引用则没影响-->
<script type="text/javascript" src="js/index.js"></script>

//index.js
const h1 = document.querySelector('h1')
h1.innerHTML = h1.textContent.replace(/\S/g, "<span>$&</span>")

在这里插入图片描述

文字逐个宽度赋值

接下来我们处理文字效果，让文字的span标签都为0

/* index.css */
h1 span {
  display: inline-block;
  overflow: hidden;
  width: 0ch;
}

在这里插入图片描述

显示文字

接下来我们使用前面引用到的知识，让文字的span标签慢慢显示出来，这样所有的文字都会在一秒钟滑入

/* index.css */
h1 span {`在这里插入代码片`
  animation: 1s text-in ease-in-out forwards;
}
@keyframes text-in {
  from {
    width: 0ch;
  }
  to {
    width: 1ch
  }
}

在这里插入图片描述

逐个文字延迟

因为我们每个文字都会同时显示，所以我们为每一个文字加上延迟

/* index.css */
h1 span {
  animation-delay: var(--delay);
}

//index.js
let delay = 0
document.querySelectorAll('span').forEach((span, index) => {
  delay += 1
  span.style.setProperty('--delay', `${delay}s`)
})

在这里插入图片描述

修改打字速度和停顿效果

修改animation时间为一毫秒

/* index.css */
h1 span {
  animation: 0.1s text-in ease-in-out forwards;
}

我们在稍加修饰

//index.js
let delay = 0
document.querySelectorAll('span').forEach((span, index) => {
  delay += 0.1
  if(index === 2)delay+=0.3
  span.style.setProperty('--delay', `${delay}s`)
})

在这里插入图片描述

优化

我们平时打字的时候光标是不会闪烁的，所以我们使用js监听我们我们的文字是否已经执行到最后一步

/* index.css */
h1 span {
  --delay: 10s;
}
h1::after {
/*animation: 1.1s cursor steps(2, jump-none) infinite; */
}
h1.ended::after {
  animation: 1.1s cursor steps(2, jump-none) infinite;
}

h1.addEventListener('animationend', (e) => {
  if (e.target === document.querySelector('h1 span:last-child')) {
    h1.classList.add('ended')
  }
})

请添加图片描述
最终的效果就完成了

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
CSS打字效果

目录前言注意简易版只是用CSS让我们开始吧开始工作统一标准扩展新增CSS代码进阶版制作更加流畅和新的效果效果预想首先设计光标打字效果前言首先我们想象一下我们打字的场景，字母会一个接一个的出来。今天我们的目的就是实现这个效果注意在项目中核心代码为animation，此属性在Internet Explorer 9以及更早的版本不支持 animation 属性。简易版只是用CSS让我们开始吧我们的文件目录为开始工作首先我们新建文件给予一个h1标签，使用flex布局将其居中<!--
复制链接

扫一扫