body {
margin: 0;
overflow: hidden;
background-color: #000; /* Arrière-plan noir */
}
.rose {
position: absolute;
bottom: 100%;
width: 50px;
height: 50px;
background-image: url('chemin/vers/rose-noire.png'); /* Remplace avec le chemin vers ton image de rose noire */
background-size: contain;
background-repeat: no-repeat;
animation: tomber 5s infinite linear; /* Animation de chute */
}
@keyframes tomber {
0% {
transform: translateY(0);
opacity: 1;
}
100% {
transform: translateY(100vh); /* Fait tomber jusqu'en bas de l'écran */
opacity: 0; /* Fait disparaître la rose */
}
}
/* Ajoute un délai aléatoire et des positions de départ */
.rose:nth-child(1) { left: 10%; animation-delay: 0s; }
.rose:nth-child(2) { left: 30%; animation-delay: 1s; }
.rose:nth-child(3) { left: 50%; animation-delay: 2s; }
.rose:nth-child(4) { left: 70%; animation-delay: 1.5s; }
.rose:nth-child(5) { left: 90%; animation-delay: 3s; }
1 commentaire
Suivre le flux RSS des articles de cette rubrique
Créer mon blog