css: A Multi-line CSS only Typewriter effect

 

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

　　

 

 

<!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>
<style>
import url("https://fonts.googleapis.com/css2?family=Major+Mono+Display&display=swap");
body {
  height: 100%;
  width: 100%;
  background: #111;
  color: #d8e0db;
  font-family: "Major Mono Display", monospace;
}
.container {
  margin-top: 5%;
  width: 100%;
  height: 100%;
  padding: 70px;
}
.first_line,
.second_line {
  white-space: nowrap; /* keep text in one line */
  overflow: hidden; /* hide text behind the cursor */
  margin: 0.5rem auto;
  font-family: "Major Mono Display", monospace;
  font-size: 2rem;
  font-weight: bold;
}
.first_line {
  border-right: 2px solid rgba(17, 17, 17, 0.9);
}
.second_line {
  border-right: 2px solid rgba(17, 17, 17, 0.9);
}
@keyframes typewriter_1 {
  from {
    width: 0;
  }
  to {
    width: 38rem;
  }
}
@keyframes typewriter_2 {
  from {
    width: 0;
  }
  to {
    width: 40rem;
  }
}	
	
.first_line {
  border-right: 2px solid rgba(17, 17, 17, 0.9);
  /* define animation types for firstline  */
  animation: typewriter_1 6s 
}
.second_line {
  border-right: 2px solid rgba(17, 17, 17, 0.9);
  /* define animation types for econd_line  */
  animation: typewriter_2 5s 
}	
	
</style>
</head>

<body>
<div class="container">
      <p class="first_line">Hello. My name is Temitope</p>
      <p class="second_line">and this is a typewriter effect</p>
    </div>	
</body>
</html>

　　

posted @ 2023-09-03 14:47  ®Geovin Du Dream Park™  阅读(37)  评论(0)    收藏  举报