<!--.:◂◀▸v▶¤◀v∫∫v▶¤◀v∫∫‡####‡‡‡‡###‡‡‡###‡‡####‡∫∫v▶¤◀v∫∫v▶¤◀v◂▶▸:.
| |
| Filename : AS_hey-what.html |
| Label : Playground |
| Author : Anton Schmolze |
| Size : 2.548 bytes |
| Created : 09. February 2024 at 14:10 |
| |
::◂◀▸v▶¤◀v∫∫v▶¤‡‡##‡‡‡‡‡‡‡‡###‡‡###‡‡‡‡##‡‡‡‡##‡‡¤◀v∫∫v▶¤◀v◂▶▸::-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>shouting space</title>
<style>
@font-face {
font-family: 'Konsole';
src: url('../_fonts/Konsolev1.1-VF.ttf') format('truetype');
}
body {
font-family: Konsole, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;
align-items: center;
overflow: hidden;
height: 100vh;
background-color: white;
}
/* defines the class of the text */
.animated-text {
/* defines the position of the text */
padding: 10px;
/* defines the font weight of the text */
font-weight: 100;
/* defines the font size of the text */
font-size: 1em;
}
/* defines the name, duration and the infinite repeats of the left sided animation */
.hey {
animation: growTextHey 3s infinite;
}
/* defines the name of the left sided animation*/
@keyframes growTextHey {
0%, 100% {
/* defines the initial and final state of the animation*/
font-size: 1em;
font-weight: 100;
}
10% {
/* defines the highest intermediate state of the animation */
font-size: 6em;
/* defines the highest font weight intermediate state of the animation */
font-weight: 500;
}
}
/* defines the name, duration and the infinite repeats of the right sided animation */
.what {
animation: growTextWhat 3s ease-in-out infinite;
}
/* defines the name of the right sided animation */
@keyframes growTextWhat {
0%, 50% {
/* defines the initial and final state of the animation */
font-size: 1em;
font-weight: 100;
}
60% {
/* defines the highest intermediate state of the animation */
font-size: 8em;
/* defines the highest font weight intermediate state of the animation */
font-weight: 800;
}
}
</style>
</head>
<body>
<div class="animated-text hey">Hey!</div>
<div class="animated-text what">What!!!</div>
</body>
</html>
