interference
by Andrey Izman
HTML
<strong class="super-dev">
<a class="interference" href="https://t.me/privetiq" target="_blank">InterFereNCe</a>
</strong>
SCSS
body {
background: #333;
background-color: rgb(24, 26, 27);
}
*,
:after,
:before,
input[type=search],
input[type=search]:after,
input[type=search]:before {
box-sizing: border-box;
}
.super-dev {
font-weight: 400;
display: block;
text-align: center;
padding: 8px;
font-size: 20px;
font-family: Lucida Console, Monaco, monospace;
color: #1771b9;
color: rgb(99, 177, 236);
}
.super-dev {
color: rgb(99, 177, 236);
}
.interference {
font-weight: bolder;
font-size: 24px;
position: relative;
margin: 0 auto
}
.interference,
.interference:active,
.interference:focus,
.interference:hover,
.interference:visited {
text-decoration: none;
color: #012345;
outline: 0;
text-decoration-color: initial;
color: rgb(210, 206, 200);
outline-color: initial;
}
@keyframes interference-c {
0% {
clip: rect(5px, 999px, 9px, 0)
}
4% {
clip: rect(9px, 999px, 4px, 0)
}
8% {
clip: rect(4px, 999px, 7px, 0)
}
12% {
clip: rect(4px, 999px, 5px, 0)
}
16%,
88% {
clip: rect(1px, 999px, 6px, 0)
}
20%,
80% {
clip: rect(3px, 999px, 3px, 0)
}
24% {
clip: rect(9px, 999px, 9px, 0)
}
28% {
clip: rect(8px, 999px, 3px, 0)
}
32% {
clip: rect(8px, 999px, 6px, 0)
}
36% {
clip: rect(1px, 999px, 8px, 0)
}
40% {
clip: rect(10px, 999px, 9px, 0)
}
44% {
clip: rect(2px, 999px, 1px, 0)
}
48% {
clip: rect(4px, 999px, 4px, 0)
}
52% {
clip: rect(3px, 999px, 8px, 0)
}
56% {
clip: rect(1px, 999px, 9px, 0)
}
60% {
clip: rect(6px, 999px, 8px, 0)
}
64% {
clip: rect(1px, 999px, 2px, 0)
}
68% {
clip: rect(5px, 999px, 5px, 0)
}
72% {
clip: rect(8px, 999px, 10px, 0)
}
76% {
clip: rect(5px, 999px, 2px, 0)
}
84% {
clip: rect(3px, 999px, 6px, 0)
}
92% {
clip: rect(5px, 999px, 10px, 0)
}
96% {
clip: rect(8px, 999px, 7px, 0)
}
to {
clip: rect(2px, 999px, 2px, 0)
...