38 lines
630 B
CSS
38 lines
630 B
CSS
|
/* https://blog.karimould.dev/hover-letter-wave-effect-in-css */
|
||
|
|
|
||
|
|
.woble {
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* .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;
|
||
|
|
}
|
||
|
|
|