Para Shady ❤️
@import url(' https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600&family=Poppins:wght@300;500&display=swap' );
:raíz {
--color primario: #ff6b81;
--color secundario: #ff9a9e;
--bg-color: #fec3a6;
--glass-bg: rgba(255, 255, 255, 0.25);
--borde de vidrio: rgba(255, 255, 255, 0.5);
}
cuerpo {
margen: 0;
relleno: 0;
altura mínima: 100vh;
pantalla: flex;
justificar-contenido: centro;
alinear-elementos: centro;
fondo: gradiente lineal (135 grados, #fdfbfb 0%, #ebedee 100%);
imagen de fondo: gradiente lineal (120 grados, #f6d365 0%, #fda085 100%);
familia de fuentes: 'Poppins', sans-serif;
desbordamiento: oculto;
}
/*Lluvia de corazones de fondo*/
.corazones-bg {
posición: absoluta;
arriba: 0;
izquierda: 0;
ancho: 100%;
altura: 100%;
eventos de puntero: ninguno;
desbordamiento: oculto;
índice z: 0;
}
.caída del corazón {
posición: absoluta;
color: rgba(255, 255, 255, 0.6);
animación: caída lineal infinita;
}
@keyframes caen {
0% { transformar: translateY(-10vh) rotar(0deg); opacidad: 1; }
100% { transformar: translateY(110vh) rotar(360deg); opacidad: 0; }
}
/* Contenedor principal estilo cristal */
.contenedor {
posición: relativa;
índice z: 10;
fondo: var(--glass-bg);
filtro de fondo: desenfoque(10px);
-webkit-backdrop-filter: desenfoque(10px);
borde: 1px solid var(--borde de vidrio);
radio del borde: 20px;
relleno: 40px;
alinear texto: centro;
caja-sombra: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
ancho máximo: 90%;
ancho: 400px;
animación: float 6s entrada-salida fácil infinita;
}
@keyframes flotan {
0% { transformar: translateY(0px); }
50% { transformar: translateY(-10px); }
100% { transformar: translateY(0px); }
}
h1 {
familia de fuentes: 'Dancing Script', cursiva;
color: #fff;
tamaño de fuente: 3.5rem;
margen inferior: 10px;
sombra de texto: 2px 2px 4px rgba(0,0,0,0.1);
}
/* Animación de la Flor CSS */
.contenedor-de-flores {
posición: relativa;
ancho: 100px;
altura: 100px;
margen: 20px automático;
}
.centro-de-flores {
ancho: 40px;
altura: 40px;
fondo: #ffeb3b;
radio del borde: 50%;
posición: absoluta;
parte superior: 50%;
izquierda: 50%;
transformar: traducir(-50%, -50%);
índice z: 2;
caja-sombra: inserción -5px -5px 10px rgba(0,0,0,0.1);
}
.pétalo {
ancho: 40px;
altura: 40px;
fondo: #ff6b81;
radio del borde: 50% 50% 0 50%;
posición: absoluta;
parte superior: 50%;
izquierda: 50%;
origen-de-transformación: 0% 0%;
opacidad: 0,9;
animación: bloom 2s avanza lentamente;
}
.petal:nth-child(1) { transformar: rotar(0 grados) traducir(10px, 10px); }
.petal:nth-child(2) { transformar: rotar(72 grados) traducir(10px, 10px); }
.petal:nth-child(3) { transformar: rotar(144 grados) traducir(10px, 10px); }
.petal:nth-child(4) { transformar: rotar(216 grados) traducir(10px, 10px); }
.petal:nth-child(5) { transformar: rotar(288 grados) traducir(10px, 10px); }
@keyframes florecen {
0% { transformar: escala(0) rotar(0); opacidad: 0; }
100% { opacidad: 1; }
}
/* Botones */
.botones-wrapper {
pantalla: flex;
justificar-contenido: centro;
espacio: 15px;
margen superior: 30px;
}
.magic-btn {
fondo: blanco;
borde: ninguno;
ancho: 50px;
altura: 50px;
radio del borde: 50%;
tamaño de fuente: 1.5rem;
cursor: puntero;
transición: todos los 0,3 s cúbicos-bezier(0,175, 0,885, 0,32, 1,275);
caja-sombra: 0 4px 6px rgba(0,0,0,0.1);
color: var(--color-primario);
}
.magic-btn:pasar el ratón {
transformar: escalar(1.2) rotar(10deg);
fondo: #fff0f3;
caja-sombra: 0 8px 15px rgba(255, 107, 129, 0.3);
}
/* Área de mensajes */
.área-de-mensajes {
altura mínima: 80px;
margen superior: 25px;
pantalla: flex;
justificar-contenido: centro;
alinear-elementos: centro;
}
.texto del mensaje {
color: #fff;
tamaño de fuente: 1.2rem;
peso de fuente: 500;
opacidad: 0;
transformar: translateY(20px);
transición: todos los 0,5 s de facilidad;
sombra de texto: 1px 1px 2px rgba(0,0,0,0.1);
}
.texto-del-mensaje.visible {
opacidad: 1;
transformar: translateY(0);
}
.nota al pie de página {
margen superior: 20px;
tamaño de fuente: 0.8rem;
color: rgba(255,255,255,0.8);
}
Para Shady
Escoge un botón...