<!--.:◂◀▸v▶¤◀v∫∫v▶¤◀v∫∫‡####‡‡‡‡###‡‡‡###‡‡####‡∫∫v▶¤◀v∫∫v▶¤◀v◂▶▸:.
| |
| Filename : EH_degree.html |
| Label : Playground |
| Author : Elias Hübner |
| Size : 6.184 bytes |
| Created : 14. February 2024 at 23:20 |
| |
::◂◀▸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>degree</title>
<style>
@font-face {
font-family: Konsole;
src: url(../_fonts/Konsolev1.1-VF.ttf);
}
body {
font-family: Konsole;
font-size: 10vh;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: hidden; height: 100vh;
}
/* defines the animation name */
@keyframes font-size-animation {
from {
/* defines the skew at the start of the animation */
transform: skew(0deg);
letter-spacing: 0px;
}
to {
/* defines the skew at the highest point of the animation */
transform: skew(40deg);
/* defines the letter spacing at the highest point of the animation */
letter-spacing: 30px;
}
}
p {
/* aligns the text to the center */
text-align: center;
/* defines the animation name */
animation-name: font-size-animation;
/* defines the duration of the animation */
animation-duration: 2.5s;
/* defines the number of times the animation should play */
animation-iteration-count: infinite;
/* defines the direction of the animation */
animation-direction: alternate;
/* defines the speed curve of the animation */
animation-timing-function: ease-in-out;
}
</style>
</head>
<body>
<p>degree</p>
</body>
</html>
