raza-basit · February 26, 2023 11:52 · raza-basit · Feb 26, 2023
diff --git a/typewriter effect using html and css b/typewriter effect using html and css
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=2.0">
  <title>squacky | typewriter effect using CSS</title>
  <style>
  :root {
  -moz-transform: scale(2.5); /*This is for demo purposes only.*/
  padding-top: 200px;
 }


 .typewriter {
  padding: 15px;
  background-color: #000;
  color: #fff;
  width: 480px;
  margin: 0 auto;
 }

 .typewriter h1 {
  font-size: 18px;
  overflow: hidden; /* Delay content display until animation finishes.*/
  border-right: .15em solid red; /* used as typwriter cursor*/
  white-space: nowrap; /* Maintains the content on a single line */
  margin: 0 auto; /* As you type, you'll notice a scrolling effect. */
  letter-spacing: .15em;
  animation:
    typing 5s steps(40, end),
    blink-caret .95s step-end infinite;
 }

 @keyframes typing {
  from { width: 0 }
  to { width: 100% }
 }

 @keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: red }
 }
 </style>
 </head>
 <body>
  <div class="typewriter">
    <h1>An example of a typewriter effect using CSS...</h1>
  </div>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=2.0">
	<title>squacky \| typewriter effect using CSS</title>
	<style>
	:root {
	-moz-transform: scale(2.5); /This is for demo purposes only./
	padding-top: 200px;
	}


	.typewriter {
	padding: 15px;
	background-color: #000;
	color: #fff;
	width: 480px;
	margin: 0 auto;
	}

	.typewriter h1 {
	font-size: 18px;
	overflow: hidden; /* Delay content display until animation finishes.*/
	border-right: .15em solid red; /* used as typwriter cursor*/
	white-space: nowrap; /* Maintains the content on a single line */
	margin: 0 auto; /* As you type, you'll notice a scrolling effect. */
	letter-spacing: .15em;
	animation:
	typing 5s steps(40, end),
	blink-caret .95s step-end infinite;
	}

	@keyframes typing {
	from { width: 0 }
	to { width: 100% }
	}

	@keyframes blink-caret {
	from, to { border-color: transparent }
	50% { border-color: red }
	}
	</style>
	</head>
	<body>
	<div class="typewriter">
	<h1>An example of a typewriter effect using CSS...</h1>
	</div>
	</body>
	</html>