用css 现实打字机效果

直接写代码,真正使用注意,一个是 width的值,二是注意在不同浏览器的兼容问题。或者用gif 图片代替

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Repeated Typing Effect</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="typing-effect">
    用CSS实现实现打字机效果!!!
  </div>
  
  <style>
	 @keyframes typing {
	   0% {
	     width: 0;
	   }
	   100% {
	     width: 100%;
	   }
	 }
	 
	 @keyframes blink-caret {
	   0%, 100% {
	     border-color: transparent;
	   }
	   50% {
	     border-color: black;
	   }
	 }
	 
	 .typing-effect {
	   overflow: hidden;
	   border-right: 4px solid black;
	   white-space: nowrap;
	   width: 550px;
	   max-width: 550px;
	   animation: typing 9.5s steps(40, end) forwards, blink-caret 0.75s step-end infinite;
	   animation-iteration-count: infinite; /* 让打字机效果无限重复 */
	   font-size: 35px;
		background: linear-gradient(to right, #0055ff, #00aaff);
		font-weight: 600;
	   -webkit-background-clip: text;
	   -webkit-text-fill-color: transparent;
	   	line-height: 1.5;
	 } 
  </style>
  
</body>
</html>
相关推荐
Jinuss18 分钟前
Vue3源码reactivity响应式篇之computed计算属性
前端·vue3
落日沉溺于海18 分钟前
React From表单使用Formik和yup进行校验
开发语言·前端·javascript
知识分享小能手20 分钟前
React学习教程,从入门到精通, React 新创建组件语法知识点及案例代码(11)
前端·javascript·学习·react.js·架构·前端框架·react
会豪23 分钟前
工业仿真(simulation)--前端(五)--标尺,刻度尺
前端
会豪24 分钟前
工业仿真(simulation)--前端(四)--画布编辑(2)
前端
an__ya__26 分钟前
Vue数据响应式reactive
前端·javascript·vue.js
苦逼的搬砖工29 分钟前
Flutter UI Components:闲来无事,设计整理了这几年来使用的UI组件库
前端·flutter
想买Rolex和Supra的凯美瑞车主31 分钟前
Taro + Vite 开发中 fs.allow 配置问题分析与解决
前端
ruanCat32 分钟前
使用 vite 的 base 命令行参数来解决项目部署在 github page 的路径问题
前端·github
Codebee38 分钟前
使用Qoder 改造前端UI/UE升级改造实践:从传统界面到现代化体验的华丽蜕变
前端·人工智能