49 lines
1.3 KiB
CSS
49 lines
1.3 KiB
CSS
|
|
|
|
main img.draggable {
|
|
max-width: 200px;
|
|
max-height: 200px;
|
|
position: absolute;
|
|
}
|
|
|
|
|
|
.draggable {
|
|
cursor: move;
|
|
position: relative;
|
|
width: fit-content;
|
|
user-select: none;
|
|
z-index: 10;
|
|
filter: drop-shadow(5px 3px 2px #000000b7);
|
|
}
|
|
|
|
.draggable:hover {
|
|
/* Start the shake animation and make the animation last for 0.5 seconds */
|
|
animation: shake 3s;
|
|
|
|
/* When the animation is finished, start again */
|
|
animation-iteration-count: infinite;
|
|
}
|
|
|
|
@keyframes shake {
|
|
0% { transform: translate(1px, 1px) rotate(0deg); }
|
|
10% { transform: translate(-1px, -2px) rotate(-1deg); }
|
|
20% { transform: translate(-2px, 0px) rotate(1deg); }
|
|
30% { transform: translate(2px, 2px) rotate(0deg); }
|
|
40% { transform: translate(1px, -1px) rotate(1deg); }
|
|
50% { transform: translate(-1px, 2px) rotate(-1deg); }
|
|
60% { transform: translate(-3px, 1px) rotate(0deg); }
|
|
70% { transform: translate(2px, 1px) rotate(-1deg); }
|
|
80% { transform: translate(-1px, -1px) rotate(1deg); }
|
|
90% { transform: translate(1px, 2px) rotate(0deg); }
|
|
100% { transform: translate(1px, -2px) rotate(-1deg); }
|
|
}
|
|
|
|
span.draggable {
|
|
display: inline-block;
|
|
/* text-shadow: 1px 1px black, 0px 1px black, -1px 0px black, -1px -1px black; */
|
|
}
|
|
|
|
.draggable[data-moving="1"] {
|
|
transform: rotate(-3deg);
|
|
filter: drop-shadow(15px 15px 6px #20202052);
|
|
}
|