Membuat animasi sederhana
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Typed Text Animation</title>
<styl>
* {
margin: 0;
padding: 0;
}
body {
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
background: #000;
font-family: Arial, Helvetica, sans-serif;
}
h1 {
font-size: 5rem;
color: #fff;
}
.input {
color: yellow;
font-size: 5rem;
}
</style>
</head>
<body>
<h1>I'm a <span class="input"></span></h1>
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
<script>
var typed = new Typed('.input', {
strings: ["Video Editor", "Programmer", "Web Developer", "Photo Editor"],
typeSpeed: 100,
backSpeed: 100,
loop: true,
});
</scrip>
</body>
</html>
0 komentar: