forked from mirror/pixelfed
Add animation for likes, from #222
This commit is contained in:
parent
eb04e595a8
commit
9f28526b99
1 changed files with 39 additions and 0 deletions
39
resources/assets/sass/custom.scss
vendored
39
resources/assets/sass/custom.scss
vendored
|
@ -211,6 +211,45 @@ body, button, input, textarea {
|
|||
animation: loading-bar 3s linear infinite;
|
||||
}
|
||||
|
||||
.liked {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.liked::after {
|
||||
content: "\F0a3";
|
||||
color: transparent;
|
||||
animation: liking 1.5s;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
left: 50%;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
@keyframes liking {
|
||||
0% {
|
||||
-webkit-transform:rotate(0deg);
|
||||
transform:rotate(0deg);
|
||||
font-size:0;
|
||||
top: .25rem;
|
||||
color: #ebf70e;
|
||||
}
|
||||
75% {
|
||||
-webkit-transform:rotate(1turn);
|
||||
transform:rotate(1turn);
|
||||
top: -0.55rem;
|
||||
font-size: 2.8rem;
|
||||
opacity:1;
|
||||
left: -0.55rem;
|
||||
}
|
||||
100% {
|
||||
transform:rotate(1turn);
|
||||
top: 2.5rem;
|
||||
left: 0em;
|
||||
font-size:0;
|
||||
left: 0.9rem
|
||||
}
|
||||
|
||||
.max-hide-overflow {
|
||||
max-height: 500px;
|
||||
overflow-y: hidden;
|
||||
|
|
Loading…
Reference in a new issue