仅使用几行HTML代码实现炫酷打字机效果
本节课程中 海海 会带大家使用 HTML 和 CSS 来制作一个如下图效果所示的打字机。
在线演示戳这里 👉 https://haiyong.site/demo/daziji/
知识点
- margin 属性
- background-color 属性
- overflow 属性
- font-size 属性
- @keyframes 属性
基本 HTML 结构
本节实验项目结构如下:
├── index.html
创建 HTML 基本框架,修改title标签中的内容。
<!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" /> <title>使用 CSS 制作打字机</title> </head> <body></body> </html>
使用 CSS 设计网页
首先,我们使用 CSS 代码来设计网页,我们要用到以下三个属性:
- margin属性是外边距,即元素距上级元素或相邻兄弟元素的距离。该属性可以有 1 到 4 个值,详情见: MDN margin 属性
- background-color属性设置元素的背景颜色。
- font-size属性可设置元素中文字的大小。
在...标签中添加 CSS 代码:
html { margin: 0; } body { background-color: black; margin: 0; margin-left: 5%; }
添加输入的文本行
现在我们的页面上还没有内容,我们需要在body中添加一行文字,就是我们可以自动打印出来的那段文字。
I am a web learner
此时文字只是显示到了页面上,那么我们怎么让文字呈现一个字符一个字符的输入呢?
我们需要来认识两个新属性:
- overflow属性规定当内容溢出元素框时的显示效果。详情见:MDN overflow 属性
- animation属性用于设置元素的动画效果,它是一个简写属性,包含六个值,分别是animation-name(动画名字),animation-duration(动画周期),animation-timing-function(每个动画周期的执行节奏),animation-delay(动画延时时间),animation-iteration-count(动画迭代次数),animation-direction(动画是否反向播放),animation-fill-mode(动画执行前后应用目标的方式) 和animation-play-state(动画是否运行或暂停)。详情见:MDN animation 属性
我们将字体设置为50px,字体大小设置为50px,字体颜色设置为白色。
使用overflow: hidden和white-space: nowrap来隐藏溢出字符。
代码如下:
#typing { color: white; float: left; font-family: sans-serif; font-weight: bold; font-size: 50px; margin-top: 20%; margin-left: 20%; overflow: hidden; white-space: nowrap; animation: typing 5s steps(22) 1s infinite alternate; }
我们把输入文本的颜色设置为绿色,这样在黑色背景上看起来会更亮丽一点。
#typing span { color: rgb(79, 255, 35); }
效果如下所示:
将光标添加到文本类型动画
为了让这个打字动画显得更加真实有趣,这里我添加了光标,我所使用的光标颜色也是绿色,大小为50像素。
完整的 HTML 代码如下:
I am a web learner |
CSS 代码如下:
#crow { float: left; margin-top: 20%; color: rgb(79, 255, 35); font-family: consolas; font-weight: bold; font-size: 50px; animation: crow 0.5s linear 0s infinite; }
效果如下所示:
使用 CSS3 激活动画
接下来我们使用@keyframes为输入的文本添加动画。
创建动画的原理是将一套 CSS 样式逐渐变化为另一套样式。以百分比来规定改变发生的时间,或者通过关键词from和to,其等价于0%和100%。0%是动画的开始时间,100%动画的结束时间。详情见:MDN @keyframes 规则
在文件中添加以下代码:
@keyframes typing { from { width: 0ch; } to { width: 15ch; } }
最终效果如下:
到这里我们的自动打字机就完成了,这里我给出了完整的源代码,同学们可以复制下来试一试
<!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"> <title>使用 CSS 制作打字机</title> <style> html { margin: 0; } body { background-color: black; background-size: cover; background-repeat: no-repeat; margin: 0; margin-left: 5%; } #typing { width: 0ch; color: white; float: left; font-family: sans-serif; font-weight: bold; font-size: 50px; margin-top: 20%; margin-left: 20%; overflow: hidden; white-space: nowrap; animation: typing 5s steps(22) 1s infinite alternate; } #typing span { color: rgb(79, 255, 35); } #crow { float: left; margin-top: 20%; color: rgb(79, 255, 35); font-family: consolas; font-weight: bold; font-size: 50px; animation: crow 0.5s linear 0s infinite; } @keyframes typing { from { width: 0ch; } to { width: 16ch; } } @keyframes crow { from { opacity: 0; } to { opacity: 1; } } </style> </head> <body> <div id="typing">I am a <span>web learner</span></div> <div id="crow">|</div> </body> </html>
写在最后
本节课程我们使用 CSS 和 HTML 实现了一个自动打字机。