My links are SPINNING
Iiiii MIGHT have done a silly thing and made my links SPIN. But I added a delay because I'm NOT A SAVAGE
Here's an example (hover over it!)
I'm hoping to add progressively more craziness to my blog over the coming days/weeks.
Why? Because I was doing some css animations for my bestie's newsletter and ... well I haven't done that much with animations before so now I'm just having fun with it.
Here's another
Here's the code!
main a {
display: inline-block;
}
main a:hover {
animation: link_weird 5s infinite;
animation-timing-function: linear;
/*overflow-y: hidden;*/
/*overflow-x: hidden;*/
/*text-wrap: nowrap;*/
/*text-overflow: clip;*/
/*display:inline-block;*/
position:relative;
display:inline-block;
}
main a:hover::before {
animation: link_before 5s infinite;
animation-timing-function: linear;
content: " ";
display:inline-block;
position: absolute;
top:0;
left: 0;
height: 100%;
border-radius: inherit;
background: rgba(0,0,0,0.3);
}
@keyframes link_before {
0% {
width: 0;
}
40% {
width: 100%;
background: rgba(0,0,0,0.3);
}
40.001% {
background: transparent;
}
100% {
background: transparent;
}
}
@keyframes link_weird {
0% {
/*color:inherit;*/
transform:scale(1,1);
transform: rotate(0deg);
}
40% {
transform:scale(1,1);
transform: rotate(0deg);
}
100% {
transform:scale(2,2);
transform: rotate(360deg);
/*color: transparent;*/
}
}