48 lines
914 B
CSS
48 lines
914 B
CSS
/* https://blog.karimould.dev/hover-letter-wave-effect-in-css */
|
|
|
|
.woble {
|
|
display: flex;
|
|
cursor: pointer;
|
|
justify-content: center;
|
|
align-items: center;
|
|
/* text-transform: uppercase; */
|
|
/* font-size: 1.5rem; */
|
|
/* padding: 1rem 2rem; */
|
|
/* background-color: black; */
|
|
/* color: white; */
|
|
/* border-radius: 100px; */
|
|
/* gap: 1rem; */
|
|
}
|
|
|
|
/* .wave > span {
|
|
transform: rotate(-90deg);
|
|
} */
|
|
|
|
@keyframes wave {
|
|
0% {
|
|
transform: scale(1) /*rotate(-90deg)*/;
|
|
}
|
|
50% {
|
|
transform: scale(1.1) /*rotate(-90deg)*/;
|
|
}
|
|
100% {
|
|
transform: scale(1) rotate(-5deg);
|
|
}
|
|
}
|
|
|
|
.woble span {
|
|
animation: wave 0.4s linear infinite;
|
|
}
|
|
|
|
.woble span:nth-child(2) {
|
|
animation-delay: 0.1s;
|
|
}
|
|
|
|
.woble span:nth-child(3) {
|
|
animation-delay: 0.2s;
|
|
}
|
|
|
|
.woble span:nth-child(4) {
|
|
animation-delay: 0.3s;
|
|
}
|
|
|