emileclarkb/dobutterfliescry.net
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

proper typing effect

Browse source
This commit is contained in:
Emile Clark-Boman 2025-07-28 10:58:18 +10:00
parent ab0e272e69
commit d4c0440136
2 changed files with 67 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

50
www/anim.css Normal file
View file

@ -0,0 +1,50 @@
body {
background-color: #0e0d14;
}
.heading {
font-family: monospace;
font-size: 2em;
font-weight: bold;
color: #ac4aed;
}
.centered {
margin-top: 25%; /* terrible solution... */
}
/* =========================================================== *
* Type Writer Effect *
/* =========================================================== */
.typing-wrapper {
display: flex;
text-align: center;
justify-content: center;
}
.typing-prompt {
display: inline-block;
text-align: center;
}
.typing {
display: inline-block;
width: 36ch;
animation: typing 3s steps(36), blink 1s step-end infinite alternate;
white-space: nowrap;
overflow: hidden;
border-right: 1ch solid;
}
@keyframes typing {
from {
width: 0
}
}
@keyframes blink {
50% {
border-color: transparent
}
}

17
www/anim.html Normal file
View file

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="anim.css">
</head>
<body>
<div class="centered heading typing-wrapper">
<!-- Comment between divs is intentional and removes implicit spacing -->
<div class="typing-prompt">
$&nbsp
</div><!--
--><div class="typing">
Do butterflies cry when they're sad?
</div>
</div>
</body>
</html>