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