adrien/quatuor
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

3D cleared line animation

Browse Source
This commit is contained in:
Adrien MALINGREY
2026-01-16 03:23:26 +01:00
parent cb49d42266
commit a4e210526f
1 changed files with 6 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
css/stereo.css
View File

@@ -177,8 +177,8 @@ td.trail-animation {
/* Left face */ /* Left face */
.minoes-table .mino::before, .minoes-table .mino::before,
.left .minoes-table .mino + .mino::before, tr.cleared-line-animation td::before,
.left tr.cleared-line-animation td::before { .left .minoes-table .mino + .mino::before {
--light: calc( --light: calc(
1.1 1.1
+ (var(--light-x) * -0.2) + (var(--light-x) * -0.2)
@@ -190,7 +190,8 @@ td.trail-animation {
/* Right face */ /* Right face */
.right .minoes-table .mino + .mino::before, .right .minoes-table .mino + .mino::before,
.minoes-table .mino + :not(.mino)::before { .minoes-table .mino + :not(.mino)::before,
.right tr.cleared-line-animation td::before {
--light: calc( --light: calc(
0.85 0.85
+ (var(--light-x) * -0.2) + (var(--light-x) * -0.2)
@@ -203,8 +204,7 @@ td.trail-animation {
transform-origin: left; transform-origin: left;
} }
.right .minoes-table .mino:last-child::before, .right .minoes-table .mino:last-child::before {
.right tr.cleared-line-animation td:last-child::before {
transform: translate3d(-2px, -2px, calc(-1 * var(--cell-side))) rotateY(90deg) !important; transform: translate3d(-2px, -2px, calc(-1 * var(--cell-side))) rotateY(90deg) !important;
transform-origin: right !important; transform-origin: right !important;
} }
@@ -271,14 +271,9 @@ td.trail-animation { --h: 180deg; --s: 50%; --l: 90%; --a: 0.4; }
} }
} }
tr.cleared-line-animation td::before,
tr.cleared-line-animation td::after {
animation: trail-animation ease-out 3s;
}
@keyframes cleared-line-animation { @keyframes cleared-line-animation {
from { from {
background-color: white; background-color: white !important;
box-shadow: 0 0 0 white; box-shadow: 0 0 0 white;
} }
to { to {