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

3d trail

Browse Source
This commit is contained in:
Adrien MALINGREY
2026-01-15 16:51:02 +01:00
parent 021d67b877
commit b3d012f489
1 changed files with 32 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
css/stereo.css
View File

@@ -151,7 +151,9 @@ tr.matrix td:not(.mino) {
.minoes-table .mino::before, .minoes-table .mino::before,
.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::after {
content: ''; content: '';
position: absolute; position: absolute;
top: 0; top: 0;
@@ -162,7 +164,8 @@ tr.matrix td:not(.mino) {
} }
/* Front face */ /* Front face */
.minoes-table .mino { .minoes-table .mino,
td.trail-animation {
--light: calc( --light: calc(
1 1
+ (var(--light-y) * 0.3) + (var(--light-y) * 0.3)
@@ -237,7 +240,7 @@ tr.matrix td:not(.mino) {
.ghost.mino, .ghost.mino + :not(.mino) { --h: 0deg; --s: 0%; --l: 55%; --a: 0.40; } .ghost.mino, .ghost.mino + :not(.mino) { --h: 0deg; --s: 0%; --l: 55%; --a: 0.40; }
.locking.mino, .locking.mino + :not(.mino) { --h: 0deg; --s: 0%; --l: 92%; --a: 0.72; } .locking.mino, .locking.mino + :not(.mino) { --h: 0deg; --s: 0%; --l: 92%; --a: 0.72; }
.disabled.mino, .disabled.mino + :not(.mino) { --h: 0deg; --s: 0%; --l: 45%; --a: 0.72; } .disabled.mino, .disabled.mino + :not(.mino) { --h: 0deg; --s: 0%; --l: 45%; --a: 0.72; }
td.trail-animation { --h: 180deg; --s: 50%; --l: 90%; --a: 0.4; }
#holdTable .J + :not(.mino), #holdTable .J + :not(.mino),
@@ -253,6 +256,32 @@ tr.matrix td:not(.mino) {
transform: translateX(50%); transform: translateX(50%);
} }
@keyframes trail-animation {
from {
background-color: hsla(180, 100%, 100%, 0.1);
box-shadow: 0 0 10px hsla(180, 100%, 100%, 0.2);
}
to {
background-color: transparent;
}
}
td.trail-animation::before,
td.trail-animation::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;
}
td.trail-animation::after {
transform: translate3d(0, 0, calc(-1 * var(--cell-side))) rotateY(90deg) !important;
transform-origin: right !important;
}
@keyframes cleared-line-animation { @keyframes cleared-line-animation {
from { from {
background-color: #ceffff66; background-color: #ceffff66;