Template:DecryptText/styles.css - Revision history

SomebodyRum at 13:25, 19 April 2026

2026-04-19T13:25:24Z

← Older revision		Revision as of 13:25, 19 April 2026
Line 9:		Line 9:
	}		}

	~~/* The real text defines the box size, but starts hidden via clip-path */~~
	.dtxt-real {		.dtxt-real {
	display: inline-block;		display: inline-block;
	visibility: hidden;		visibility: hidden;
	clip-path: inset(0 100% 0 0); ~~/* 100% cut from the right side */~~		clip-path: inset(0 100% 0 0);
	}		}

	~~/* The mask overlays absolutely and crops the glitch text */~~
	.dtxt-mask {		.dtxt-mask {
	position: absolute;		position: absolute;
Line 25:		Line 23:
	font-weight: bold;		font-weight: bold;
	color: inherit;		color: inherit;
	clip-path: inset(0 0 0 0); ~~/* Fully visible initially */~~		clip-path: inset(0 0 0 0);
	}		}

	~~/* The string of gibberish that rapidly jerks left and right */~~
	.dtxt-scroller {		.dtxt-scroller {
	display: inline-block;		display: inline-block;
Line 37:		Line 34:
	/* =========================================		/* =========================================
	STATE 1: STAY DECRYPTED (Default)		STATE 1: STAY DECRYPTED (Default)
	~~Uses a 9999s delay to permanently "stick"~~
	========================================= */		========================================= */
	.dtxt-stay .dtxt-real {		.dtxt-stay .dtxt-real {
Line 45:		Line 41:
	visibility: visible;		visibility: visible;
	clip-path: inset(0 0 0 0);		clip-path: inset(0 0 0 0);
	transition: clip-path 1.2s linear, visibility 0s;		transition: clip-path 0.7s linear, visibility 0s;
	}		}

Line 52:		Line 48:
	}		}
	.dtxt-stay:hover .dtxt-mask {		.dtxt-stay:hover .dtxt-mask {
	clip-path: inset(0 0 0 100%); ~~/* Hides from left to right */~~		clip-path: inset(0 0 0 100%);
	opacity: 0;		opacity: 0;
	transition: clip-path 1.2s linear, opacity 0s 1.2s;		transition: clip-path 0.7s linear, opacity 0s 0.7s;
	}		}

Line 61:		Line 57:
	========================================= */		========================================= */
	.dtxt-revert .dtxt-real {		.dtxt-revert .dtxt-real {
	transition: clip-path 0.5s linear, visibility 0s 0.5s;		transition: clip-path 0.4s linear, visibility 0s 0.4s;
	}		}
	.dtxt-revert:hover .dtxt-real {		.dtxt-revert:hover .dtxt-real {
	visibility: visible;		visibility: visible;
	clip-path: inset(0 0 0 0);		clip-path: inset(0 0 0 0);
	transition: clip-path 1.2s linear, visibility 0s;		transition: clip-path 0.7s linear, visibility 0s;
	}		}

	.dtxt-revert .dtxt-mask {		.dtxt-revert .dtxt-mask {
	transition: clip-path 0.5s linear, opacity 0s;		transition: clip-path 0.4s linear, opacity 0s;
	}		}
	.dtxt-revert:hover .dtxt-mask {		.dtxt-revert:hover .dtxt-mask {
	clip-path: inset(0 0 0 100%);		clip-path: inset(0 0 0 100%);
	opacity: 0;		opacity: 0;
	transition: clip-path 1.2s linear, opacity 0s 1.2s;		transition: clip-path 0.7s linear, opacity 0s 0.7s;
			}

			/* =========================================
			STATE 3: ON LOAD (Auto-Decrypt)
			========================================= */
			.dtxt-load .dtxt-real {
			animation: dtxt-reveal 1.2s linear 0.5s forwards;
			}
			.dtxt-load .dtxt-mask {
			animation: dtxt-hide 1.2s linear 0.5s forwards;
			}

			@keyframes dtxt-reveal {
			0% { visibility: visible; clip-path: inset(0 100% 0 0); }
			100% { visibility: visible; clip-path: inset(0 0 0 0); }
			}
			@keyframes dtxt-hide {
			0% { clip-path: inset(0 0 0 0); opacity: 1; }
			99% { clip-path: inset(0 0 0 100%); opacity: 1; }
			100% { clip-path: inset(0 0 0 100%); opacity: 0; }
	}		}

	/* ~~The rapid "character~~ mutation~~" via~~ translation */		/* Character mutation translation */
	@keyframes dtxt-matrix {		@keyframes dtxt-matrix {
	0% { transform: translateX(0); }		0% { transform: translateX(0); }
Line 96:		Line 112:
	.dtxt-scroller { animation: none !important; }		.dtxt-scroller { animation: none !important; }
	.dtxt-stay:hover .dtxt-real, .dtxt-stay:hover .dtxt-mask,		.dtxt-stay:hover .dtxt-real, .dtxt-stay:hover .dtxt-mask,
	.dtxt-revert:hover .dtxt-real, .dtxt-revert:hover .dtxt-mask {		.dtxt-revert:hover .dtxt-real, .dtxt-revert:hover .dtxt-mask,
			.dtxt-load .dtxt-real, .dtxt-load .dtxt-mask {
	transition-duration: 0s !important;		transition-duration: 0s !important;
			animation-duration: 0s !important;
	}		}
	}		}

SomebodyRum at 13:18, 19 April 2026

2026-04-19T13:18:33Z

Show changes

SomebodyRum: Created page with "/* Template:DecryptText/styles.css Hover-to-decrypt text effect with a "trigger once" delay trick / .dec-scene { display: inline-block; position: relative; vertical-align: bottom; cursor: default; } / The real text defines the bounding box of the container / .dec-real { display: inline; } / The mask overlays absolutely, cropping to the exact size of the real text */ .dec-mask { position: absolute; top: 0; left: 0; right: 0; bottom: 0..."

2026-04-19T13:14:32Z

Created page with "Template:DecryptText/styles.css Hover-to-decrypt text effect with a "trigger once" delay trick: .dec-scene { display: inline-block; position: relative; vertical-align: bottom; cursor: default; } The real text defines the bounding box of the container: .dec-real { display: inline; } The mask overlays absolutely, cropping to the exact size of the real text: .dec-mask { position: absolute; top: 0; left: 0; right: 0; bottom: 0..."

New page

/* Template:DecryptText/styles.css
Hover-to-decrypt text effect with a "trigger once" delay trick */

.dec-scene {
display: inline-block;
position: relative;
vertical-align: bottom;
cursor: default;
}

/* The real text defines the bounding box of the container */
.dec-real {
display: inline;
}

/* The mask overlays absolutely, cropping to the exact size of the real text */
.dec-mask {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
overflow: hidden;
word-break: break-all;
font-family: 'Courier New', Courier, monospace;
font-weight: bold;
color: inherit;
}

/* =========================================
STATE 1: STAY DECRYPTED (Default)
Uses a 9999s delay to permanently "stick"
========================================= */
.dec-stay .dec-real {
opacity: 0;
transition: opacity 0s 9999s; /* Magic trick: wait 9999 seconds to hide */
}
.dec-stay:hover .dec-real {
opacity: 1;
transition: opacity 0.4s 0.1s; /* Appear smoothly after a 0.1s delay */
}

.dec-stay .dec-mask {
opacity: 1;
transition: opacity 0s 9999s;
}
.dec-stay:hover .dec-mask {
opacity: 0;
animation: dec-scramble 0.3s steps(4);
transition: opacity 0.2s 0.2s; /* Glitches for 0.2s, then fades out */
}

/* =========================================
STATE 2: REVERT ON MOUSE LEAVE
========================================= */
.dec-revert .dec-real {
opacity: 0;
transition: opacity 0.4s 0.2s; /* Hide smoothly when mouse leaves */
}
.dec-revert:hover .dec-real {
opacity: 1;
transition: opacity 0.4s 0.1s;
}

.dec-revert .dec-mask {
opacity: 1;
transition: opacity 0.4s 0.2s;
}
.dec-revert:hover .dec-mask {
opacity: 0;
animation: dec-scramble 0.3s steps(4);
transition: opacity 0.2s 0.2s;
}

/* Terminal glitch animation */
@keyframes dec-scramble {
0% { transform: translate(0, 0); }
25% { transform: translate(-2px, 1px); }
50% { transform: translate(1px, -1px); }
75% { transform: translate(-1px, 2px); }
100% { transform: translate(0, 0); }
}

@media (prefers-reduced-motion: reduce) {
.dec-stay:hover .dec-mask,
.dec-revert:hover .dec-mask {
animation: none !important;
}
}