<!--.:◂◀▸v▶¤◀v∫∫v▶¤◀v∫∫‡####‡‡‡‡###‡‡‡###‡‡####‡∫∫v▶¤◀v∫∫v▶¤◀v◂▶▸:.
| |
| Filename : NK_Flicker.html |
| Author : Nina Kahmke |
| |
::◂◀▸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>FLICKER</title>
<style>
@font-face {
font-family: Konsole;
src: url(../_fonts/Konsolev1.1-VF.ttf);
}
body,html{margin:0;padding:0;height:100%;}
body {
font-family: Konsole;
font-feature-settings: "calt" 1, "liga" 1, "rlig" 1, "rvrn" 1, "kern" 1, "rclt" 1;
font-variation-settings: "wght" 400, "wdth" 300;
font-size: 6vw;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
@keyframes text-flicker-out-glow {
/* defines when and how long the text is shown at a certain point in the animation */
0% {
opacity: 1;
text-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);
}
13.9% {
opacity: 1;
text-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);
}
14% {
opacity: 0;
text-shadow: none;
}
14.9% {
opacity: 0;
text-shadow: none;
}
15% {
opacity: 1;
text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.4), 0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1);
}
22.9% {
opacity: 1;
text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.4), 0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1);
}
23% {
opacity: 0;
text-shadow: none;
}
24.9% {
opacity: 0;
text-shadow: none;
}
25% {
opacity: 1;
text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35), 0 0 100px rgba(255, 255, 255, 0.1);
}
34.9% {
opacity: 1;
text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35), 0 0 100px rgba(255, 255, 255, 0.1);
}
35% {
opacity: 0;
text-shadow: none;
}
39.9% {
opacity: 0;
text-shadow: none;
}
40% {
opacity: 1;
text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35);
}
42.9% {
opacity: 1;
text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35);
}
43% {
opacity: 0;
text-shadow: none;
}
44.9% {
opacity: 0;
text-shadow: none;
}
45% {
opacity: 1;
text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
}
50% {
opacity: 1;
text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
}
54.9% {
opacity: 1;
text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
}
55% {
opacity: 0;
text-shadow: none;
}
69.4% {
opacity: 0;
text-shadow: none;
}
69.5% {
opacity: 1;
text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
}
69.9% {
opacity: 1;
text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
}
70% {
opacity: 0;
text-shadow: none;
}
79.4% {
opacity: 0;
text-shadow: none;
}
79.9% {
opacity: 1;
text-shadow: 0 0 30px rgba(255, 255, 255, 0.25);
}
80% {
opacity: 0;
text-shadow: none;
}
89.8% {
opacity: 0;
text-shadow: none;
}
89.9% {
opacity: 1;
text-shadow: none;
}
90% {
opacity: 0;
text-shadow: none;
}
100% {
opacity: 0;
}
}
.class-1 {
/* combines animation properties into a single property */
animation: text-flicker-out-glow 2.5s infinite both;
}
</style>
</head>
<body>
<p class="class-1"> FLICKER </p>
</body>
</html>
