Website/styles/Socials.module.css

77 lines
1.6 KiB
CSS
Executable File

@keyframes appear {
from {
opacity:0;
scale: 0.5;
}
to {
opacity:1;
scale: 1.2;
}
}
@keyframes appeartext {
0% {
opacity:0;
scale: 0.5;
filter: blur(5px);
}
10%{
opacity:1;
}
100% {
opacity:1;
scale: 1;
filter: blur(0px);
}
}
.Socials {
animation-name: appeartext;
animation-duration: 2s;
animation-delay:0s;
animation-fill-mode: forwards;
animation-timing-function: ease;
opacity: 0;
scale: 0.5;
filter: blur(5px);
user-select: none;
}
.Socials>i {
scale: 0.5;
opacity: 0;
animation-name: appear;
animation-duration: 1s;
animation-delay: 1s;
animation-fill-mode: forwards;
animation-timing-function: ease;
user-select: none;
}
.Button {
cursor: pointer;
color: #17171f;
opacity: .5;
mix-blend-mode: screen;
mask-clip: text;
display: inline-block;
padding-left: 20px;
transition: all .5s;
scale: 1;
backface-visibility: hidden;
-webkit-font-smoothing: subpixel-antialiased;
transform: translateZ(0);
user-select: none;
backdrop-filter: invert(1);
}
.Button:hover {
color: #666;
opacity: .5;
mix-blend-mode: screen;
mask-clip: text;
/* mask-image: linear-gradient(to right, transparent, #666); */
scale: 1.08;
shape-rendering: geometricPrecision;
text-rendering: geometricPrecision;
backface-visibility: hidden;
-webkit-font-smoothing: subpixel-antialiased;
transform: translateZ(0);
user-select: none;
backdrop-filter: invert(1);
}