Template:Typing Text Effect/styles.css - Revision history

LordSkorne7 at 07:48, April 16, 2025

2025-04-16T07:48:05Z

← Older revision		Revision as of 07:48, April 16, 2025
Line 3:		Line 3:
	/* Container with blinking cursor effect */		/* Container with blinking cursor effect */
	.cursor {		.cursor {
	~~display~~: ~~inline~~;		position: relative;
			display: inline-block;
			margin: 0 auto;
	border-right: 2px solid rgba(255, 255, 255, 0.75);		border-right: 2px solid rgba(255, 255, 255, 0.75);
	white-space: nowrap;		white-space: nowrap;
	overflow: hidden;		overflow: hidden;
			background: transparent;
⚫	vertical-align: ~~baseline~~;
			opacity: 1;
			width: auto;
			max-width: 100%;
		⚫	vertical-align: middle;
	}		}

LordSkorne7 at 07:42, April 16, 2025

2025-04-16T07:42:48Z

← Older revision		Revision as of 07:42, April 16, 2025
Line 3:		Line 3:
	/* Container with blinking cursor effect */		/* Container with blinking cursor effect */
	.cursor {		.cursor {
	~~position~~: ~~relative~~;		display: inline;
	width: 24em;
	margin: 0 auto;
	border-right: 2px solid rgba(255, 255, 255, 0.75);		border-right: 2px solid rgba(255, 255, 255, 0.75);
	white-space: nowrap;		white-space: nowrap;
	overflow: hidden;		overflow: hidden;
			vertical-align: baseline;
	transform: translateY(-50%);
	display: inline-block;
	}		}

LordSkorne7: Created page with "/* Template:Typing Text Effect/styles.css / / Container with blinking cursor effect / .cursor { position: relative; width: 24em; margin: 0 auto; border-right: 2px solid rgba(255, 255, 255, 0.75); white-space: nowrap; overflow: hidden; transform: translateY(-50%); display: inline-block; } / Typewriter animation */ .typewriter-animation { animation: typewriter 5s steps(50, end) 1s 1 normal both, blinkingCursor 500ms steps(50, end) infinite n..."

2025-04-16T07:37:11Z

Created page with "Template:Typing Text Effect/styles.css: Container with blinking cursor effect: .cursor { position: relative; width: 24em; margin: 0 auto; border-right: 2px solid rgba(255, 255, 255, 0.75); white-space: nowrap; overflow: hidden; transform: translateY(-50%); display: inline-block; } Typewriter animation: .typewriter-animation { animation: typewriter 5s steps(50, end) 1s 1 normal both, blinkingCursor 500ms steps(50, end) infinite n..."

New page

/* Template:Typing Text Effect/styles.css */

/* Container with blinking cursor effect */
.cursor {
position: relative;
width: 24em;
margin: 0 auto;
border-right: 2px solid rgba(255, 255, 255, 0.75);
white-space: nowrap;
overflow: hidden;
transform: translateY(-50%);
display: inline-block;
}

/* Typewriter animation */
.typewriter-animation {
animation:
typewriter 5s steps(50, end) 1s 1 normal both,
blinkingCursor 500ms steps(50, end) infinite normal;
}

@keyframes typewriter {
from { width: 0; }
to { width: 100%; }
}

@keyframes blinkingCursor {
from { border-right-color: rgba(255, 255, 255, 0.75); }
to { border-right-color: transparent; }
}