<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cool Animated Footer</title>
<!-- Подключаем иконки FontAwesome для красоты -->
<link rel="stylesheet" href="https://cloudflare.com">
<style>
/* Обнуление и базовые стили для демонстрации */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background: #0b0c10;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
/* --- СУПЕР КЛАССНЫЙ ФУТЕР --- */
.magic-footer {
position: relative;
background: #12131c;
width: 100%;
padding: 60px 40px 30px;
overflow: hidden;
border-top: 4px solid transparent;
/* Анимированная градиентная рамка наверху */
border-image: linear-gradient(90deg, #ff007f, #7f00ff, #00f0ff, #ff007f) 1;
animation: borderGlow 6s linear infinite;
}
/* Живой движущийся фон (волны/градиент) */
.magic-footer::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(127,0,255,0.15) 0%, rgba(0,0,0,0) 60%),
radial-gradient(circle, rgba(0,240,255,0.1) 0%, rgba(0,0,0,0) 70%);
animation: rotateBg 20s linear infinite;
z-index: 1;
}
/* Контейнер для контента */
.footer-container {
position: relative;
z-index: 2;
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 40px;
}
/* Блоки футера */
.footer-box {
color: #fff;
}
.footer-box h3 {
font-size: 24px;
margin-bottom: 20px;
background: linear-gradient(45deg, #00f0ff, #ff007f);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
}
.footer-box p {
color: #a0a5c0;
line-height: 1.6;
margin-bottom: 20px;
}
/* Интерактивные ссылки-кнопки */
.footer-links {
list-style: none;
}
.footer-links li {
margin-bottom: 12px;
}
.footer-links a {
color: #a0a5c0;
text-decoration: none;
font-size: 16px;
transition: all 0.3s ease;
display: inline-block;
position: relative;
}
/* Эффект подчеркивания и выезда при наведении */
.footer-links a::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: -4px;
left: 0;
background: linear-gradient(90deg, #00f0ff, #ff007f);
transition: width 0.3s ease;
}
.footer-links a:hover {
color: #fff;
transform: translateX(8px);
text-shadow: 0 0 10px rgba(0,240,255,0.5);
}
.footer-links a:hover::after {
width: 100%;
}
/* Разноцветные Кнопки Соцсетей */
.social-icons {
display: flex;
gap: 15px;
margin-top: 15px;
}
.social-btn {
width: 50px;
height: 50px;
border-radius: 50%;
background: #1a1c29;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 20px;
text-decoration: none;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
border: 1px solid rgba(255,255,255,0.1);
}
/* Персонализированные цвета при наведении */
.social-btn.youtube:hover { background: #ff0000; box-shadow: 0 0 20px #ff0000; transform: translateY(-5px) scale(1.1); }
.social-btn.telegram:hover { background: #0088cc; box-shadow: 0 0 20px #0088cc; transform: translateY(-5px) scale(1.1); }
.social-btn.tiktok:hover { background: #ff007f; box-shadow: 0 0 20px #ff007f; transform: translateY(-5px) scale(1.1); }
.social-btn.github:hover { background: #333; box-shadow: 0 0 20px #fff; transform: translateY(-5px) scale(1.1); }
/* Форма подписки с кнопкой-взрывом */
.subscribe-form {
display: flex;
flex-direction: column;
gap: 10px;
}
.subscribe-form input {
padding: 14px;
border-radius: 8px;
border: 2px solid #25283d;
background: #1a1c29;
color: #fff;
outline: none;
transition: 0.3s;
}
.subscribe-form input:focus {
border-color: #00f0ff;
box-shadow: 0 0 10px rgba(0,240,255,0.3);
}
.animated-button {
padding: 14px;
border: none;
border-radius: 8px;
background: linear-gradient(45deg, #7f00ff, #ff007f);
color: white;
font-weight: bold;
cursor: pointer;
position: relative;
overflow: hidden;
transition: 0.3s;
text-transform: uppercase;
letter-spacing: 1px;
}
.animated-button:hover {
transform: scale(1.03);
box-shadow: 0 0 20px rgba(255, 0, 127, 0.6);
}
/* Эффект блика на кнопке */
.animated-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 50%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
transition: 0.5s;
}
.animated-button:hover::before {
left: 150%;
}
/* Нижняя полоса с копирайтом */
.footer-bottom {
position: relative;
z-index: 2;
margin-top: 50px;
padding-top: 25px;
border-top: 1px solid rgba(255,255,255,0.05);
text-align: center;
color: #6c7293;
font-size: 14px;
}
.footer-bottom span {
color: #00f0ff;
font-weight: bold;
cursor: pointer;
}
/* --- КЛАССНЫЕ АНИМАЦИИ ДЛЯ КРУГОВ (JS) --- */
.interactive-bubble {
position: absolute;
border-radius: 50%;
background: linear-gradient(45deg, rgba(0,240,255,0.2), rgba(255,0,127,0.2));
pointer-events: auto; /* Чтобы можно было трогать мыжкой */
cursor: pointer;
transition: transform 0.5s cubic-bezier(0.1, 0.8, 0.3, 1), opacity 0.5s;
z-index: 1;
}
/* Ключевые кадры для анимаций */
@keyframes borderGlow {
0% { background-position: 0% 50%; }
100% { background-position: 400% 50%; }
}
@keyframes rotateBg {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<!-- НАЧАЛО ФУТЕРА -->
<footer class="magic-footer" id="interactiveFooter">
<!-- Контент -->
<div class="footer-container">
<!-- Блок 1: О проекте -->
<div class="footer-box">
<h3>CyberSpace</h3>
<p>Мы создаем потрясающие цифровые решения будущего. Кликай, исследуй, играй с элементами — этот подвал полностью интерактивен!</p>
<div class="social-icons">
<a href="#" class="social-btn telegram"><i class="fab fa-telegram"></i></a>
<a href="#" class="social-btn youtube"><i class="fab fa-youtube"></i></a>
<a href="#" class="social-btn tiktok"><i class="fab fa-tiktok"></i></a>
<a href="#" class="social-btn github"><i class="fab fa-github"></i></a>
</div>
</div>
<!-- Блок 2: Навигация -->
<div class="footer-box">
<h3>Навигация</h3>
<ul class="footer-links">
<li><a href="#"><i class="fas fa-bolt" style="color: #00f0ff; margin-right: 8px;"></i>Главная страница</a></li>
<li><a href="#"><i class="fas fa-rocket" style="color: #ff007f; margin-right: 8px;"></i>Наши крутые фичи</a></li>
<li><a href="#"><i class="fas fa-gem" style="color: #7f00ff; margin-right: 8px;"></i>Премиум доступ</a></li>
<li><a href="#"><i class="fas fa-code" style="color: #00ff88; margin-right: 8px;"></i>Секретная зона</a></li>
</ul>
</div>
<!-- Блок 3: Интерактивная форма -->
<div class="footer-box">
<h3>Рассылка будущего</h3>
<p>Оставь почту и получи доступ к закрытому контенту.</p>
<form class="subscribe-form" onsubmit="event.preventDefault(); alert('🚀 Ура! Вы успешно подписались на Кибер-рассылку!');">
<input type="email" placeholder="Твой секретный Email" required>
<button class="animated-button" type="submit">Вступить в банду</button>
</form>
</div>
</div>
<!-- Нижняя плашка -->
