← Retour au menu
Exercice 7 – Transitions et animations
7.1 Bouton animé
/* Créez un bouton avec des transitions au survol : */
button {
background-color: #0d6efd;
color: white;
padding: 10px 20px;
transition: background-color 0.3s ease, transform 0.2s ease;
}
button:hover {
background-color: #0a58ca;
transform: scale(1.05); /* Effet d'agrandissement */
}
DÉMONSTRATION
7.2 Animation de chargement
/* Créez un spinner de chargement avec @keyframes : */
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.spinner {
width: 40px;
height: 40px;
border: 4px solid #ced4da;
border-top: 4px solid #0d6efd;
border-radius: 50%;
animation: spin 1s linear infinite;
}