好玩的CSS---实现打字效果

最新推荐文章于 2024-04-01 12:15:42 发布

CreatorRay

最新推荐文章于 2024-04-01 12:15:42 发布

阅读量715

点赞数

本文链接：https://blog.csdn.net/m0_46171043/article/details/110293751

版权

前端专栏收录该内容

264 篇文章 23 订阅

订阅专栏

代码自用自取，复制粘贴直接使用，喜欢的话可以查看博主其它文章，贡献一丢丢的浏览量，感激不尽。

CSS是前端非常重要的技术也是对于前端熟练度的考察。很多的后端程序员表示在学习前端知识的时候，JS其实不是强有力的拦路虎，众多的实践证明CSS才是后端程序员最烦恼的技术。所以，CSS是咱们前端程序员稳住饭碗的技术。

学好CSS从我做起！

今天我们用CSS实现一下打字的效果，这个还是比较好玩的。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		div {
		  width: 100%; 
		  height: 229px;
		  display: flex;
		  justify-content: center;
		  align-items: center;
		}
		span {
		  display: inline-block;
		  width: 21ch;
		  font: bold 200% Consolas, Monaco, monospace;   /*等宽字体*/
		  overflow: hidden;
		  white-space: nowrap;
		  font-weight: 500;
		  border-right: 1px solid transparent;
		  animation: typing 10s steps(21), caret .5s steps(1) infinite;
		}
		@keyframes typing{
		  from {
			  width: 0;
		  }
		}
		@keyframes caret{
		  50% { border-right-color: currentColor}
		}
	  </style>
</head>
<body>
		<div class="main">
		  <span>关注Code程序人生微信公众号~~~</span>
		</div>
</body>
</html>

效果：
在这里插入图片描述

点赞、关注、收藏都是对作者莫大的鼓励，感谢！

个人QQ：505417246

关注下面微信公众号，可以领取微信小程序、Vue、TypeScript、Web前端基础、uniapp、Nodejs、Python、Java等学习资料

在这里插入图片描述

CreatorRay

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
好玩的CSS---实现打字效果

代码自用自取，复制粘贴直接使用，喜欢的话可以查看博主其它文章，贡献一丢丢的浏览量，感激不尽。CSS是前端非常重要的技术也是对于前端熟练度的考察。很多的后端程序员表示在学习前端知识的时候，JS其实不是强有力的拦路虎，众多的实践证明CSS才是后端程序员最烦恼的技术。所以，CSS是咱们前端程序员稳住饭碗的技术。学好CSS从我做起！今天我们用CSS实现一下打字的效果，这个还是比较好玩的。<!DOCTYPE html><html lang="en"><head> .
复制链接

扫一扫