当前位置:首页 > 电脑知识 > 正文内容

越早知道越好(html打字机效果)css打字机效果逐行打印,CSS实现打字机效果的方法,CSS实现打字机效果的方法,

sauo3年前 (2022-09-17)电脑知识122

发现一个有趣的东西,就是使用纯CSS代码实现打字机的效果。所谓的打字机效果就是控制一个字符串字符,并且字符串中的每个一个字符一个接着一个的出现。

纯CSS实现文字的打印机效果,要用到 animation 动画元素,下面先上示例代码。

CSS实现文字打印机效果的方法

1、先上效果图

2、示例代码

Markup
<style> .main { height: 80vh; display: flex; align-items: center; justify-content: center; } .content { width: 450px; white-space: nowrap; overflow: hidden; border-right: 3px solid; font-family: monospace; font-size: 2em; animation: go 4s steps(22), off .5s step-end infinite alternate; } @keyframes go { from { width: 0; } } @keyframes off { 50% { border-color: transparent; } } </style> <div class="main"> <div class="content">飞鸟慕鱼博客 http://feiniaomy.com</div> </div>复制

本文链接:http://blog.sauo.top/?id=303 感谢分享!

分享到:

扫描二维码推送至手机访问。

版权声明:本文由冬眠先生个人博客发布,如需转载请注明出处。

本文链接:http://blog.sauo.top/?id=303

分享给朋友:

“越早知道越好(html打字机效果)css打字机效果逐行打印,CSS实现打字机效果的方法,CSS实现打字机效果的方法,” 的相关文章

硬核推荐(ubuntu取消自动休眠)ubuntu关闭自动休眠命令,ubuntu 关闭自动休眠模式的方法,ubuntu 关闭自动休眠模式的方法,

硬核推荐(ubuntu取消自动休眠)ubuntu关闭自动休眠命令,ubuntu 关闭自动休眠模式的方法,ubuntu 关闭自动休眠模式的方法,

免费领取腾讯云服务器! 在使用ssh连接ubuntu系统时,发现长时间不输入ssh命令ssh就会自动断开。查找了一下原因,发现是安装ubuntu的电脑自动进入了休眠模式,而ubuntu系统中有多种关闭自动休眠的方法,下面就来说一说使用ssh命令来关闭ubu...

万万没想到(Ubuntu安装ssh服务)ubuntu配置ssh服务器,ubuntu安装ssh服务器的方法,ubuntu安装ssh服务器的方法,

万万没想到(Ubuntu安装ssh服务)ubuntu配置ssh服务器,ubuntu安装ssh服务器的方法,ubuntu安装ssh服务器的方法,

免费领取腾讯云服务器! 安装了一个ubuntu系统,想着在内网中用ssh进行远程连接管理。下面这篇博文就说说如果在ubuntu系统中安装ssh远程管理服务。 ubuntu 安装ssh服务器的方法 1、安装 openssh-s...

干货分享(php输出json中文乱码)json数据中文乱码怎么办,解决 php json中文乱码的问题,解决 php json中文乱码的问题,

免费领取腾讯云服务器! php输出使用json_encode函数生成的json数据的时候,发现数据中的中文被转义成了unicode编码,如果使用ajax请求的json数据还好一点,浏览器会自动将unicode编码转义回来,但如果直接输出到浏览器上,那就会直...

速看(js将图片转换为二进制流)js将图片转换为webp,js将图片转换为base64编码方法,js将图片转换为base64编码方法,

免费领取腾讯云服务器! js可以将图片文件转成base64编码的,便于图片文件的上传与处理,下面就写几种关于js脚本来转换图片为base64编码的方法。 js将图片转换为base64编码的方法 方法1 将自身...

这都可以(判断是否是ajax请求)php判断请求方式,php判断是否为ajax请求的方法,php判断是否为ajax请求的方法,

免费领取腾讯云服务器! 在后端可以利用php代码来判断前台提交的数据是否通过ajax进行提交的,其方法也非常的简单,只需要判断$_SERVER["HTTP_X_REQUESTED_WITH"] 是否存在,以及判断 $_SERVER["HTTP_X_REQU...

没想到(imagettftext函数)imagettftext函数支持的编码类型,imagettftext(): any2eucjp(): invalid code in input string 错误解决方法,imagettftext(): any2eucjp(): invalid code in input string 错误解决方法,

免费领取腾讯云服务器! 最近在研究关于php生成图片的东西,发现了 imagettftext() 函数中一个不是错误的错误,具体的错误情况如下所示。 错误代码:...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。