-
Notifications
You must be signed in to change notification settings - Fork 20
Themes
Marcus Green edited this page Sep 3, 2020
·
3 revisions
<style>
input.droptarget {
align-content: center;
background:pink;
}
input.droptarget.dropped {
transform: rotate(20deg);
background:red;
}
input.droptarget.active {
border-radius: 50%;
padding:4px;
color: blue;
}
</style>
<style>
.que.gapfill .droptarget.dropped {
animation: shake 0.5s;
animation-iteration-count: 1;
}
</style>
<style>
.draggable:hover{
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
.que.gapfill input.droptarget.dropped {
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
</style>
<style>
.que.gapfill input.typetext, .que.gapfill input.droptarget{
background:none;
border:none;
border-bottom: 1px dashed black;
}
</style>
<style>
.que.gapfill input.typetext, .que.gapfill input.droptarget{
text-align: right;
}
</style>
@keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 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(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}