Анимированный текстовый логотип с CSS-эффектами

Создадим стильный анимированный текстовый логотип для "SuperShop" с современными CSS-эффектами.

1. Базовый логотип с градиентом

Начнем с простого текстового логотипа с градиентной заливкой:

<div class="logo">
	<span class="logo-text">SuperShop</span>
</div>

.logo {
	font-family: 'Arial Black', sans-serif;
	font-size: 4rem;
	font-weight: bold;
	text-align: center;
	margin: 50px auto;
	padding: 20px;
}

.logo-text {
	background: linear-gradient(45deg, #ff8a00, #e52e71, #2575fc);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	display: inline-block;
}

2. Добавляем анимацию градиента

Сделаем плавное перетекание цветов в градиенте:

<div class="logo animated-gradient">
	<span class="logo-text">SuperShop</span>
</div>

.logo {
	font-family: 'Arial Black', sans-serif;
	font-size: 4rem;
	font-weight: bold;
	text-align: center;
	margin: 50px auto;
	padding: 20px;
}

.animated-gradient .logo-text {
	background: linear-gradient(45deg, #ff8a00, #e52e71, #2575fc, #ff8a00);
	background-size: 300% 300%;
	animation: gradient-shift 8s ease infinite;
}

@keyframes gradient-shift {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

3. Улучшенный эффект пульсирующей тени

Добавим более мягкую пульсацию тени:

<div class="logo pulse-shadow">
	<span class="logo-text">SuperShop</span>
</div>

.logo {
	font-family: 'Arial Black', sans-serif;
	font-size: 4rem;
	font-weight: bold;
	text-align: center;
	margin: 50px auto;
	padding: 20px;
}

.pulse-shadow .logo-text {
	animation: shadow-pulse 3s ease infinite;
}

@keyframes shadow-pulse {
	0%, 100% {
		text-shadow: 0 0 8px rgba(100, 200, 255, 0.4);
	}
	50% {
		text-shadow: 0 0 15px rgba(229, 46, 113, 0.5);
	}
}

4. Улучшенный 3D-эффект

Добавим более выраженный 3D-эффект при наведении:

<div class="logo transform-logo">
	<span class="logo-text">SuperShop</span>
</div>

.logo {
	font-family: 'Arial Black', sans-serif;
	font-size: 4rem;
	font-weight: bold;
	text-align: center;
	margin: 50px auto;
	padding: 20px;
}

.transform-logo {
	perspective: 800px;
}

.transform-logo .logo-text {
	display: inline-block;
	transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
	transform-style: preserve-3d;
}

.transform-logo:hover .logo-text {
	transform: rotateY(20deg) rotateX(5deg) scale(1.08);
}

5. Итоговый вариант логотипа

Объединим все улучшенные эффекты:

<div class="logo final-logo">
	<span class="logo-text">SuperShop</span>
</div>

.logo {
	font-family: 'Arial Black', sans-serif;
	font-size: 4rem;
	font-weight: bold;
	text-align: center;
	margin: 50px auto;
	padding: 20px;
}

.final-logo {
	perspective: 800px;
	font-size: 5rem;
}

.final-logo .logo-text {
	display: inline-block;
	background: linear-gradient(45deg, #ff8a00, #e52e71, #2575fc, #ff8a00);
	background-size: 300% 300%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: 
		gradient-shift 8s ease infinite,
		shadow-pulse 3s ease infinite;
	transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
	transform-style: preserve-3d;
	padding: 0 20px;
	border-radius: 10px;
}

.final-logo:hover .logo-text {
	transform: rotateY(20deg) rotateX(5deg) scale(1.08);
}

@keyframes gradient-shift {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

@keyframes shadow-pulse {
	0%, 100% { 
		text-shadow: 0 0 8px rgba(100, 200, 255, 0.4);
	}
	50% { 
		text-shadow: 0 0 15px rgba(229, 46, 113, 0.5);
	}
}