用CSS两分钟实现打字机效果

想实现打字机效果，我们要用到一个标签，那就是HTML5中的新标签main
几乎所有浏览器都支持，唯独Internet Explorer
main标签呢规定文档的重要内容，就是说内容对文档来说应该是唯一的，不应该包含重复出现的内容。
注意：在同一个文档中，不能出现一个以上的main元素，main元素不能是以下元素的后代：article、aside、footer、header、nav。

<main class="main"><span>前端GitHub</span>
</main>

下面就是style部分

      main {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}}

效果图如下

main打字机

用CSS两分钟实现打字机效果相关推荐

纯 CSS 实现打字机效果
纯 CSS 实现打字机效果先看效果预备知识在学习这个需要了解两个新的 CSS 知识 ch 单位 ch 是一个相对长度单位, 表示数字 0 的宽度. steps 函数这时 CSS 动画中 ani ...
【实战】用CSS实现文本打字机效果
之前,我们的文章中已经有通过 JS 的方式实现文本打字机的效果了,具体可以看这篇文章: [前端三分钟]利用Javascript实现打字效果在本文中,你将学习如何使用纯CSS实现打字机效果,使网站的文 ...
[css] rgba()和opacity这两个的透明效果有什么区别呢？
[css] rgba()和opacity这两个的透明效果有什么区别呢? 1.opacity 是属性,rgba()是函数,计算之后是个属性值: 2.opacity 作用于元素和元素的内容,内容会继承元素 ...
css两张图片怎么合在一起_web前端入门到实战：纯CSS实现两个球相交的粘粘效果...
这是一个纯粹利用CSS所做出来的效果,这个效果说穿了就是一个图像处理的原理,做法跟Photoshop里头的几乎一模一样,只是一个用图层和色版来制作,一个则是用CSS(把div当成图层思考就好了). 从 ...
利用css动画实现打字机效果
简言通过使用css的animation(动画属性)实现文字显示的打字机效果. 单行思路实现步骤: 将文本框属性设置为等宽字体,计算文本框的字数,设置文字大小.相对布局等. 将文本框隐藏,通过动画 ...
如何设计 Web App 应用架构？「两分钟了解 IOING」
IOING 在做些什么? IOING 在你的代码和浏览器之间架设了一个中间解释层,该解释层提供了一套新的语法来填补浏览器所不具备的能力. SPA 开发痛点开发一个 SPA 应用的痛点是不同模块页面的 ...
如何实现chatgpt的打字机效果
点击↑上方↑蓝色"编了个程"关注我~ 这是Yasin的第 88 篇原创文章打字机效果最近在搭建chat gpt代理的时候,发现自己的配置虽然能够调通接口,返回数据,但是结果是一 ...
Android零基础入门第30节：两分钟掌握FrameLayout帧布局
原文:Android零基础入门第30节:两分钟掌握FrameLayout帧布局前面学习了线性布局.相对布局.表格布局,那么本期来学习第四种布局--FrameLayout帧布局. 一.认识FrameL ...
CSS如何实现内凹角效果 By 大漠
记得@Lea Verou的<CSS Secrets>一书和前几天@Chris Coyier刚发的帖子都介绍了CSS怎么实现元素斜切口的效果.我也尝试着借助Vue的能力,把这种效果构建成一个 ...

用CSS两分钟实现打字机效果

用CSS两分钟实现打字机效果相关推荐

最新文章

热门文章