纯CSS打字机效果

最新推荐文章于 2024-08-31 15:41:55 发布

一剑落笙歌

最新推荐文章于 2024-08-31 15:41:55 发布

阅读量4k

点赞数 7

分类专栏：前端学习记录 CSS 文章标签： css css3

本文链接：https://blog.csdn.net/Gqiangqiang/article/details/107456521

版权

偶尔会在网站的首页看到有打字机效果，看着挺酷的，最近研究了一下。

虽然以前看过，但是一直不知道怎么做的，刚开始以为是使用一个div或者span进行遮挡，然后使用动画移动div的位置。但是如果想要看着舒服，还需要动一下文字的位置，这样就比较麻烦了。后来，看了一下网上的做法，发现自己想多了。原来改变文字所在的div、span或者p这些元素的宽高就可以了，先来看看大致的效果。 Blog打字机1

下面开始来做：

基础页面：

<!DOCTYPE html>
<html>
<head>
	<title>test</title>
<style>
	.con {
    
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	.line {
    
		border-right: 2px solid #000;
	}