LordSkorne7 at 17:37, April 1, 2025

2025-04-01T17:37:59Z

← Older revision		Revision as of 17:37, April 1, 2025
Line 1:		Line 1:
			body {
			background: #000;
		⚫	overflow: hidden;
			margin: 0;
			height: 100vh;
		⚫	}

	.matrix-container {		.matrix-container {
	position: relative;		position: relative;
Line 5:		Line 12:
	align-items: center;		align-items: center;
	height: 100vh;		height: 100vh;
			z-index: 2; /* Ensure it stays above the rain effect */
⚫	overflow: hidden;
	z-index: 2;
	pointer-events: none;
	}		}

	.matrix-text {		.matrix-text {
			color: #0f0;
			font-size: 80px;
			font-family: monospace;
	position: relative;		position: relative;
			text-shadow: 0 0 10px #0f0, 0 0 20px #0f0, 0 0 30px #0f0;
	opacity: 1;
	z-index: 2;		z-index: 2; /* Ensure it stays above the rain effect */
	}		}

Line 26:		Line 34:
	clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);		clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
	transform: translate(-2px, -2px);		transform: translate(-2px, -2px);
	color: ~~inherit~~;		color: #0f0;
			text-shadow: 0 0 5px #0f0, 0 0 15px #0f0;
	}		}

Line 42:		Line 51:
	);		);
	animation: rain 10s linear infinite;		animation: rain 10s linear infinite;
	z-index: 1;		z-index: 1; /* Place it behind the text */
	}		}

	/* ~~Glitch~~ ~~effect~~ ~~animation~~ */		/* Animation for the rain effect */
		⚫	@keyframes rain {
		⚫	0% {
		⚫	transform: translateY(-100%);
		⚫	}
		⚫	100% {
		⚫	transform: translateY(100%);
		⚫	}
			}

			/* Glitch effect for the text */
	@keyframes glitch {		@keyframes glitch {
	0%, 100% {		0%, 100% {
Line 58:		Line 77:
	clip-path: polygon(0 85%, 100% 85%, 100% 100%, 0 100%);		clip-path: polygon(0 85%, 100% 85%, 100% 100%, 0 100%);
	transform: translate(5px, 5px);		transform: translate(5px, 5px);
⚫	}
⚫	}

	/* Rain movement */
⚫	@keyframes rain {
⚫	0% {
⚫	transform: translateY(-100%);
⚫	}
⚫	100% {
⚫	transform: translateY(100%);
	}		}
	}		}

LordSkorne7: Created page with ".matrix-container { position: relative; display: flex; justify-content: center; align-items: center; height: 100vh; overflow: hidden; z-index: 2; pointer-events: none; } .matrix-text { position: relative; opacity: 1; z-index: 2; } .matrix-text::before { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; animation: glitch 2s infinite; clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%); transfor..."

2025-04-01T16:23:09Z

Created page with ".matrix-container { position: relative; display: flex; justify-content: center; align-items: center; height: 100vh; overflow: hidden; z-index: 2; pointer-events: none; } .matrix-text { position: relative; opacity: 1; z-index: 2; } .matrix-text::before { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; animation: glitch 2s infinite; clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%); transfor..."

New page

.matrix-container {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
z-index: 2;
pointer-events: none;
}

.matrix-text {
position: relative;
opacity: 1;
z-index: 2;
}

.matrix-text::before {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
animation: glitch 2s infinite;
clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
transform: translate(-2px, -2px);
color: inherit;
}

.rain {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: repeating-linear-gradient(
0deg,
rgba(0, 255, 0, 0.1) 0,
rgba(0, 255, 0, 0.2) 2px,
transparent 4px
);
animation: rain 10s linear infinite;
z-index: 1;
}

/* Glitch effect animation */
@keyframes glitch {
0%, 100% {
clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
transform: translate(0);
}
33% {
clip-path: polygon(0 0, 100% 0, 100% 15%, 0 15%);
transform: translate(-5px, -5px);
}
66% {
clip-path: polygon(0 85%, 100% 85%, 100% 100%, 0 100%);
transform: translate(5px, 5px);
}
}

/* Rain movement */
@keyframes rain {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(100%);
}
}

Template:Terminal Title Text Effect/stlyes.css - Revision history

LordSkorne7 at 17:37, April 1, 2025