CSS3 输入文字特效
2022/1/8 23:34:10
本文主要是介绍CSS3 输入文字特效,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } body { position: relative; min-height: 100vh; background: #000; } .typewriting { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .typewriting h2 { overflow: hidden; white-space: nowrap; letter-spacing: 5px; font: bold 4em TencentSans; color: #fff; animation: typing 3s steps(6) forwards; } .typewriting::after { content: ""; display: block; position: absolute; top: 0; right: 0; width: 2px; height: 100%; background: #fff; animation: blink 1.1s linear infinite; } @keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } @keyframes typing { 0% { width: 0; } 100% { width: 414px; } } </style> </head> <body> <div class="typewriting"> <h2>输入文字特效</h2> </div> </body> </html>
这篇关于CSS3 输入文字特效的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-01CSS-Module学习:轻松入门与实战技巧
- 2024-09-29CSS6教程:初学者必备指南
- 2024-09-29CSS定位教程:入门与实战指南
- 2024-09-29CSS浮动教程:掌握网页布局的基础技巧
- 2024-09-29CSS选择器教程:初学者必备指南
- 2024-09-29CSS样式教程:初学者必备指南
- 2024-09-27CSS 中的黄金比例
- 2024-09-25CSS大厂面试真题详解及备考指南
- 2024-09-10深入浅出TailwindCSS开发:快速上手与实战技巧
- 2024-09-10尾风CSS开发:快速上手与实战指南