48 lines
570 B
CSS
48 lines
570 B
CSS
|
.svg {
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
right: 0;
|
||
|
|
}
|
||
|
|
.arm {
|
||
|
|
transform-origin: 130px 106px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.svg:hover .arm {
|
||
|
|
animation: wave 560ms ease-in-out;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes wave {
|
||
|
|
0% {
|
||
|
|
transform: rotate(0deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
20% {
|
||
|
|
transform: rotate(-25deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
40% {
|
||
|
|
transform: rotate(10deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
60% {
|
||
|
|
transform: rotate(-25deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
80% {
|
||
|
|
transform: rotate(10deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
transform: rotate(0deg);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 500px) {
|
||
|
|
.svg:hover .arm {
|
||
|
|
animation: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.svg:hover .arm {
|
||
|
|
animation: wave 560ms ease-in-out;
|
||
|
|
}
|
||
|
|
}
|