CSS: Glitch эффект

CSS код создаёт эффект глюка или сбоя, который включает в себя небольшие изменения цвета и скосы.

Привет, я глючу!
.glitch {
	position: relative;
	display: inline-block;
	color: white; 
	background-color: black; 
	animation: glitch 1s infinite;
}

@keyframes glitch {
	0%, 100% {
		transform: translate(0);
		text-shadow: none;
	}
	25% {
		transform: translate(-5px, 5px) skewX(5deg);
		text-shadow: 3px 0 red, -3px 2px blue;
	}
	50% {
		transform: translate(5px, -5px) skewY(-5deg);
		text-shadow: -3px 0 green, 3px 2px yellow;
	}
	75% {
		transform: translate(-5px, 5px) skewX(-5deg);
		text-shadow: 2px 0 cyan, -2px 2px purple;
	}
}
3 г. Просмотров: 1.8k
Материал помог? Оценка помогает находить устаревшие и спорные решения.

Комментарии

0

Нашли ошибку или хотите дополнить материал?

Комментариев пока нет.Можно первым дополнить материал или сообщить об ошибке.
Telegram