<!--.:◂◀▸v▶¤◀v∫∫v▶¤◀v∫∫‡####‡‡‡‡###‡‡‡###‡‡####‡∫∫v▶¤◀v∫∫v▶¤◀v◂▶▸:.
| |
| Filename : MP_ wavy-text.html |
| Author : Maximilian Pesch |
| |
::◂◀▸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>Wavy Text</title>
<style>
@font-face {
font-family: Konsole;
src: url(../_fonts/Konsolev1.1-VF.ttf);
}
body {
font-family: Konsole;
font-size: 6vh;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: hidden;
height: 100vh;
}
/* defines the name of the first class */
.class-1 {
/* defines the size of the text */
font-size: large;
/* defines the rotation during the animation */
transform: rotate(-10deg);
/* links this class to the animation, sets its duration and repeats to infinite */
animation: wave 2s infinite;
/* defines the speed process of the animation */
animation-timing-function: linear;
}
/* defines the name of the second class */
.class-2 {
/* defines the size of the text */
font-size: xx-large;
/* defines the rotation during the animation */
transform: rotate(-10deg);
/* links this class to the animation, sets its duration and repeats to infinite */
animation: wave 3s infinite;
/* defines the speed process of the animation */
animation-timing-function: linear;
}
/* defines the name of the third class */
.class-3 {
/* defines the size of the text */
font-size: xx-large;
/* defines the rotation during the animation */
transform: rotate(-10deg);
/* links this class to the animation, sets its duration and repeats to infinite */
animation: wave 4s infinite;
animation-timing-function: linear;
}
/* defines the name of the fourth class */
.class-4 {
/* defines the size of the text */
font-size: xx-large;
/* defines the rotation during the animation */
transform: rotate(-10deg);
/* links this class to the animation, sets its duration and repeats to infinite */
animation: wave 5s infinite;
/* defines the speed process of the animation */
animation-timing-function: linear;
}
/* defines the animation, and links it to the text lines */
@keyframes wave {
0% {
/* sets the rotation at he beginning of the animation */
transform: rotate(-10deg);
letter-spacing: 0;
}
50% {
/* sets the rotation at the middle of the animation 10 degrees, so its making the wave movement */
transform: rotate(10deg);
letter-spacing: 10px;
}
100% {
/* sets the rotation at the end of the animation */
transform: rotate(-10deg);
letter-spacing: 0;
}
}
</style>
</head>
<body>
<p class="class-1">It looks very wavy</p>
<p class="class-2">Also this one is overseas</p>
<p class="class-3">i feel like i drank too much of the funny water</p>
<p class="class-4">this is the end of the paper but its still wavy</p>
</body>
</html>
