<!--.:◂◀▸v▶¤◀v∫∫v▶¤◀v∫∫‡####‡‡‡‡###‡‡‡###‡‡####‡∫∫v▶¤◀v∫∫v▶¤◀v◂▶▸:.
| |
| Filename : MR_grins.html |
| Author : Maik Reinke |
| |
::◂◀▸v▶¤◀v∫∫v▶¤‡‡##‡‡‡‡‡‡‡‡###‡‡###‡‡‡‡##‡‡‡‡##‡‡¤◀v∫∫v▶¤◀v◂▶▸::-->
<!DOCTYPE html>
<html>
<head>
<title>GRINS</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
@font-face {
font-family: Konsole;
src: url(../_fonts/Konsolev1.1-VF.ttf);
}
.box {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
font-size: 20vh;
}
.box span {
font-family: Konsole;
letter-spacing: 20px;
position: relative;
display: inline-block;
}
.Star1 {
animation: Star1 2s ease 2s infinite alternate;
left: 10px;
}
.G {
animation: G 2s ease 2s infinite alternate;
}
.R {
animation: R 2s ease 2s infinite alternate;
}
.I {
animation: I 2s ease 2s infinite alternate;
}
.N {
animation: N 2s ease 2s infinite alternate;
}
.S {
animation: S 2s ease 2s infinite alternate;
}
.Star2 {
animation: Star2 2s ease 2s infinite alternate;
right: 10px;
}
@keyframes Star1 {
0% {
font-variation-settings: "wght" 50;
left: 10px;
bottom: 0px;
}
100% {
font-variation-settings: "wght" 800;
transform: rotate(35deg);
left: 50px;
bottom: 75px;
}
}
@keyframes G {
0% {
font-variation-settings: "wght" 50;
left: 0px;
bottom: 0px;
}
100% {
font-variation-settings: "wght" 800;
transform: rotate(20deg);
left: 30px;
bottom: 40px;
}
}
@keyframes R {
0% {
font-variation-settings: "wght" 50;
left: 0px;
top: 0px;
}
100% {
font-variation-settings: "wght" 800;
transform: rotate(10deg);
left: 5px;
top: 15px;
}
}
@keyframes I {
0% {
font-variation-settings: "wght" 50;
left: 0px;
top: 0px;
}
100% {
font-variation-settings: "wght" 800;
left: -5px;
top: 40px;
}
}
@keyframes N {
0% {
font-variation-settings: "wght" 50;
right: 0px;
top: 0px;
}
100% {
font-variation-settings: "wght" 800;
transform: rotate(-10deg);
right: 15px;
top: 10px;
}
}
@keyframes S {
0% {
font-variation-settings: "wght" 50;
right: 0px;
bottom: 0px;
}
100% {
font-variation-settings: "wght" 800;
transform: rotate(-25deg);
right: 33px;
bottom: 40px;
}
}
@keyframes Star2 {
0% {
font-variation-settings: "wght" 50;
right: 10px;
bottom: 0px;
}
100% {
font-variation-settings: "wght" 800;
transform: rotate(-35deg);
right: 55px;
bottom: 80px;
}
}
</style>
</head>
<body>
<div class="box">
<span class="Star1">*</span>
<span class="G">G</span>
<span class="R">R</span>
<span class="I">I</span>
<span class="N">N</span>
<span class="S">S</span>
<span class="Star2">*</span>
</div>
</body>
</html>
