Encabezado halloween solo para budypress
/* 🎃 Encabezado Halloween para BuddyPress / WordPress */
/* Pega este código en Apariencia → Personalizar → CSS adicional */
/* Fondo general del encabezado */
header.site-header {
position: relative;
background: linear-gradient(180deg, #1a0f1f 0%, #000 100%);
background-image: url(‘https://wallpapers.com/images/hd/purple-halloween-ecek5wax31531mdy.jpg’);
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
color: #f7d88a;
overflow: hidden;
z-index: 1;
}
/* Capa de nubes translúcidas en movimiento */
header.site-header::before {
content: “”;
position: absolute;
top: 0;
left: 0;
width: 200%;
height: 100%;
background: url(‘https://peliculazo.site/wp-content/uploads/2025/10/pngwing.com_.png’) repeat-x;
background-size: contain;
opacity: 0.25;
animation: moverNiebla 60s linear infinite;
z-index: 0;
}
@keyframes moverNiebla {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* Bruja volando en escoba */
header.site-header::after {
content: “”;
position: absolute;
top: 20px;
left: -150px;
width: 100px;
height: 100px;
background: url(‘https://peliculazo.site/wp-content/uploads/2025/10/bruja.png’) no-repeat center;
background-size: contain;
animation: volarBruja 20s linear infinite;
z-index: 2;
}
@keyframes volarBruja {
0% { transform: translateX(0) translateY(0) rotate(5deg); opacity: 1; }
25% { transform: translateX(25vw) translateY(-15px) rotate(-5deg); }
50% { transform: translateX(50vw) translateY(0) rotate(3deg); opacity: 0.9; }
75% { transform: translateX(75vw) translateY(15px) rotate(-3deg); }
100% { transform: translateX(100vw) translateY(0) rotate(5deg); opacity: 0.8; }
}
/* Título y descripción del sitio */
header.site-header .site-title,
header.site-header .site-description {
text-shadow: 2px 2px 4px #000;
color: #f7d88a;
}
/* Efecto de iluminación suave al pasar el ratón */
header.site-header:hover {
box-shadow: inset 0 -10px 40px rgba(255, 140, 0, 0.3);
transition: box-shadow 0.8s ease-in-out;
}
/* No afectar el menú */
header.site-header nav,
header.site-header .main-navigation {
position: relative;
z-index: 5;
}
Páginas:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
Escrito por Peliculazo
