stripe line clear animation
This commit is contained in:
parent
e1992f4c1e
commit
d56a8a6b06
24
css/pop.css
24
css/pop.css
@ -92,4 +92,28 @@ tr.matrix td:not(.mino) {
|
|||||||
.locked.mino {
|
.locked.mino {
|
||||||
animation: locked-animation;
|
animation: locked-animation;
|
||||||
animation-duration: 0.2s;
|
animation-duration: 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
tr.cleared-line-animation {
|
||||||
|
animation: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
tr.cleared-line-animation::after {
|
||||||
|
content: "";
|
||||||
|
width: 100%;
|
||||||
|
height: var(--cell-side);
|
||||||
|
position: fixed;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
display: block;
|
||||||
|
background: repeating-linear-gradient(transparent, #fffb 1px);
|
||||||
|
opacity: 0;
|
||||||
|
animation: cleared-line-animation ease-out .3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes cleared-line-animation {
|
||||||
|
25% {
|
||||||
|
width: 200%;
|
||||||
|
opacity: 100%;
|
||||||
|
}
|
||||||
}
|
}
|
Loading…
x
Reference in New Issue
Block a user