<!--.:◂◀▸v▶¤◀v∫∫v▶¤◀v∫∫‡####‡‡‡‡###‡‡‡###‡‡####‡∫∫v▶¤◀v∫∫v▶¤◀v◂▶▸:.
| |
| Filename : LF_font-stretch_trees.html |
| Author : Louisa Fortwengel |
| |
::◂◀▸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>staring into trees</title>
<style>
@font-face {
font-family: Konsole;
src: url(../_fonts/Konsolev1.1-VF.ttf);
}
body {
font-family: Konsole;
font-size: 4vh;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: hidden;
height: 100vh;
}
div {
padding: 50px;
}
/* defines the name of the animation in the second, fourth and ninth line */
@keyframes width-01 {
0% {
/* defines the font stretch and letter spacing at the beginning of the animation */
font-stretch: 110%;
letter-spacing: 10px;
}
40% {
/* defines the font stretch and letter spacing at the middle of the animation */
font-stretch: 125%;
letter-spacing: 10.5px;
}
100% {
/* defines the font stretch and letter spacing at the end of the animation */
font-stretch: 110%;
letter-spacing: 10px;
}
}
/* defines the name of the animation in the fith and sixth text line */
@keyframes width-02 {
0% {
/* defines the font stretch and letter spacing at the beginning of the animation */
font-stretch: 120%;
letter-spacing: 9.8px;
}
60% {
/* defines the font stretch and letter spacing at the middle of the animation */
font-stretch: 130%;
letter-spacing: 10.6px;
}
100% {
/* defines the font stretch and letter spacing at the end of the animation */
font-stretch: 120%;
letter-spacing: 9.8px;
}
}
/* defines the name of the animation in the third and eighth text line */
@keyframes width-03 {
0% {
/* defines the font stretch and letter spacing at the beginning of the animation */
font-stretch: 105%;
letter-spacing: 9.6px;
}
80% {
/* defines the font stretch and letter spacing at 80% of the animation */
font-stretch: 115%;
letter-spacing: 11.5px;
}
100% {
/* defines the font stretch and letter spacing at the end of the animation */
font-stretch: 105%;
letter-spacing: 9.6px;
}
}
/* defines the name of the animation in the first and seventh text line */
@keyframes width-04 {
0% {
/* defines the font stretch and letter spacing at the beginning of the animation */
font-stretch: 115%;
letter-spacing: 9px;
}
40% {
/* defines the font stretch and letter spacing at 40% of the animation */
font-stretch: 130%;
letter-spacing: 12px;
}
100% {
/* defines the font stretch and letter spacing at the end of the animation */
font-stretch: 130%;
letter-spacing: 9px;
}
}
/* defines the class of the second, fourth and ninth text line */
.class-1{
/* links the animation name, to the chosen text lines */
animation-name: width-01;
/* sets the duration of the animation */
animation-duration: 10s;
/* sets the number of times the animation should be played */
/* infinite means that the animation will be played infinitely */
animation-iteration-count: infinite;
animation-timing-function: linear;
}
/* defines the class of the fifth and sixth text line */
.class-2{
/* links the animation name, to the chosen text lines */
animation-name: width-02;
/* sets the duration time of the animation, the different durations make it look more interesting */
animation-duration: 9s;
/*^ sets the number of times the animation should be played */
animation-iteration-count: infinite;
/* sets the timing function of the animation */
animation-timing-function: linear;
}
/* defines the class of the third and eighth text line */
.class-3{
/* links the animation name, to the chosen text lines */
animation-name: width-03;
/* sets the duration time of the animation, the different duration times make it look more intersting */
animation-duration: 14s;
/* sets the number of times the animation should be played */
animation-iteration-count: infinite;
/* sets the timing function of the animation */
animation-timing-function: linear;
}
/* defines the class of the first and seventh text line */
.class-4{
/* links the animation name, to the chosen text lines */
animation-name: width-04;
/* sets the duration time of the animation, the different duration times make it look more intersting */
animation-duration: 18s;
/* sets the number of times the animation should be played */
animation-iteration-count: infinite;
/* sets the timing function of the animation */
animation-timing-function: linear;
}
</style>
</head>
<body>
<div>
<p class="class-4"> staring into trees </p>
<p class="class-1"> staring into trees </p>
<p class="class-3"> staring into trees </p>
<p class="class-1"> staring into trees </p>
<p class="class-2"> staring into trees </p>
<p class="class-2"> staring into trees </p>
<p class="class-4"> staring into trees </p>
<p class="class-3"> staring into trees </p>
<p class="class-1"> staring into trees </p>
</div>
</body>
</html>
