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 02:31:13 +01:00
parent 90b1251ebf
commit cb49d42266
1 changed files with 27 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
css/stereo.css
View File

@@ -153,7 +153,9 @@ tr.matrix td:not(.mino) {
.minoes-table .mino + :not(.mino)::before, .minoes-table .mino + :not(.mino)::before,
.minoes-table .mino::after, .minoes-table .mino::after,
td.trail-animation::before, td.trail-animation::before,
td.trail-animation::after { td.trail-animation::after,
tr.cleared-line-animation td::before,
tr.cleared-line-animation td::after {
content: ''; content: '';
position: absolute; position: absolute;
top: 0; top: 0;
@@ -175,7 +177,8 @@ td.trail-animation {
/* Left face */ /* Left face */
.minoes-table .mino::before, .minoes-table .mino::before,
.left .minoes-table .mino + .mino::before { .left .minoes-table .mino + .mino::before,
.left tr.cleared-line-animation td::before {
--light: calc( --light: calc(
1.1 1.1
+ (var(--light-x) * -0.2) + (var(--light-x) * -0.2)
@@ -187,8 +190,7 @@ 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 .minoes-table .mino:last-child::before {
--light: calc( --light: calc(
0.85 0.85
+ (var(--light-x) * -0.2) + (var(--light-x) * -0.2)
@@ -201,13 +203,15 @@ 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;
} }
/* Top face */ /* Top face */
.minoes-table .mino::after { .minoes-table .mino::after,
tr.cleared-line-animation td::after {
--light: calc( --light: calc(
1.5 1.5
+ (var(--light-y) * 0.2) + (var(--light-y) * 0.2)
@@ -217,7 +221,8 @@ td.trail-animation {
} }
/* Bottom face */ /* Bottom face */
.bottom .minoes-table .mino::after { .bottom .minoes-table .mino::after,
.bottom tr.cleared-line-animation td::after {
--light: calc( --light: calc(
1.1 1.1
+ (var(--light-y) * -0.3) + (var(--light-y) * -0.3)
@@ -266,23 +271,25 @@ td.trail-animation { --h: 180deg; --s: 50%; --l: 90%; --a: 0.4; }
} }
} }
td.trail-animation::before, tr.cleared-line-animation td::before,
td.trail-animation::after { tr.cleared-line-animation td::after {
animation: trail-animation ease-out .3s; animation: trail-animation ease-out 3s;
} }
td.trail-animation::before { @keyframes cleared-line-animation {
transform: translate3d(0, 0, calc(-1 * var(--cell-side))) rotateY(-90deg); from {
transform-origin: left; background-color: white;
box-shadow: 0 0 0 white;
}
to {
background-color: #fff0;
box-shadow: 0 0 50px transparent;
}
} }
td.trail-animation::after { tr.cleared-line-animation td::before,
transform: translate3d(0, 0, calc(-1 * var(--cell-side))) rotateY(90deg) !important; tr.cleared-line-animation td::after {
transform-origin: right !important; animation: cleared-line-animation ease-out .3s;
}
tr.cleared-line-animation {
animation: none;
} }
@keyframes show-level-animation { @keyframes show-level-animation {