43 lines
579 B
CSS
43 lines
579 B
CSS
|
/* https://blog.karimould.dev/hover-letter-wave-effect-in-css */
|
||
|
|
|
||
|
|
/*
|
||
|
|
.wave > span {
|
||
|
|
transform: rotate(-90deg);
|
||
|
|
}
|
||
|
|
*/
|
||
|
|
|
||
|
|
@keyframes wave {
|
||
|
|
0% {
|
||
|
|
transform: scale(1);
|
||
|
|
}
|
||
|
|
|
||
|
|
50% {
|
||
|
|
transform: scale(1.1);
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
transform: scale(1) rotate(-5deg);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.wobler.dance {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row;
|
||
|
|
}
|
||
|
|
|
||
|
|
.wobler.dance span {
|
||
|
|
animation: wave 0.4s linear infinite;
|
||
|
|
}
|
||
|
|
|
||
|
|
.wobler.dance span:nth-child(2) {
|
||
|
|
animation-delay: 0.1s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.wobler.dance span:nth-child(3) {
|
||
|
|
animation-delay: 0.2s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.wobler.dance span:nth-child(4) {
|
||
|
|
animation-delay: 0.3s;
|
||
|
|
}
|