css: A Multi-line CSS only Typewriter effect

®Geovin Du Dream Park™ / 2023-09-03 / 原文

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">	
<title>A Multi-line CSS only Typewriter effect </title>
	<meta name="Description" content="geovindu,涂聚文，Geovin Du"/>
<meta name="Keywords" content="geovindu,涂聚文，Geovin Du"/>
<meta name="author" content="geovindu,涂聚文，Geovin Du"/>	
	 <link rel="stylesheet" href="../bootstrap/4.6.2/css/bootstrap.min.css">	
	 <script  src="../js/jquery-3.6.0.js"></script>
	<script  src="../popperjs/4.1/popper.min.js"></script>
	 <script src="../bootstrap/4.6.2/js/bootstrap.min.js" type="text/javascript"></script>	
  <script src="../ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>  
	 <script  type="text/javascript" src="../assets/js/DuSize.js"></script>
	<script type="text/javascript" src="MessgeBox/alert4.js"></script>
	<script type="text/javascript" src="MessgeBox/confirm.js"></script>
<script type="text/javascript">
	/*
	資源：
	https://dev.to/afif/a-multi-line-css-only-typewriter-effect-3op3
	https://css-tricks.com/snippets/css/typewriter-effect/
	https://www.sitepoint.com/css-typewriter-effect/
	https://blog.logrocket.com/creating-typewriter-animation-css/
	https://daily-dev-tips.com/posts/typewriter-effect-css/
	*/
	
	</script>
<style>
	
body {
  background:#005F6B;
  color:#fff;
  max-width:300px;
}
p {
  margin:5px 0;
}
.type {
  outline:2px solid red;
  font-family: monospace;
  font-weight: 700;
  font-size:35px;
  background:linear-gradient(#00DFFC 0 0) 0 0;
  background-size:calc(var(--n)*1ch) 200%;
  background-repeat:no-repeat;
  animation: t calc(var(--n)*.3s) linear infinite alternate;
}
@keyframes t{
  from {background-size:0 200%}
}
.clip {
  color:#0000;
  -webkit-background-clip:text;
  background-clip:text;
}
.step {
  animation-timing-function:steps(var(--n))
}

	
	
	
</style>
</head>

<body>
<p>a continuous background coloration</p>
<span class="type" style="--n:22;">I am a糊塗聚文  multi-line text</span>
<p>We clip it to the text</p>
<span class="type clip" style="--n:22;">I am a multi-line text</span>
<p>We make it a discrete animation </p>
<span class="type clip step" style="--n:22;">I am a multi-line text</span>
</body>
</html>