<!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>
