CARTE DE CONNEXION

1,097 THEOPHANE

Ouvrir dans l'éditeur Publiez votre code

Recommandé

9 September 2023

Effet de survol de bouton CSS

26 February 2026

Modèle HTML de site web de films

16 April 2026

Code d'intégration du jeu HTML5 Drive Mad

HTML

CSS

body{
    background: linear-gradient(25deg,#8360c3,#2ebf91);

}
.image{
    border-radius: 50%;
    width: 140px;
    height: 140px;
    object-fit: cover;
    box-shadow: 0 4px 16px rgba(44, 62, 80, 0.2);
    margin-bottom: 15px;
    border: 4px solid #fff;

}
.lili{
    background: linear-gradient(25deg,#8360c3,#2ebf91);
       border: none;
    border-radius: 25px;
    padding: 30px 20px;
    margin: 40px auto;
    color: #fff;
    font-size: 20px;
    text-align: center;
    width: 350px;
    box-shadow: 0 8px 24px rgba(44, 62, 80, 0.2);
    transition: box-shadow 0.3s;
}
.i{   background: linear-gradient(90deg, #2ebf91, #8360c3);
    color: #fff;
    border: none;
    border-radius: 25px;
    padding: 12px 32px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(44, 62, 80, 0.15);
    margin-top: 18px;
    transition: background 0.3s, transform 0.2s;

}
.po{
     background: linear-gradient(90deg, #8360c3, #2ebf91);
    transform: scale(1.08);
    color: #fff;
        font-weight: bold;
    color: #2ebf91;
    margin-bottom: 10px;
    font-size: 1.3em;
}
@keyframes slideUpFadeIn {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
/* Ajout de l'animation à la classe .lili */
.lili {
    /* ...tes styles existants... */
    animation: slideUpFadeIn 1s ease;
}
@keyframes zoomRotateIn {
    from {
        opacity: 0;
        transform: scale(0.7) rotate(-10deg);
    }
    to {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

.lili {
    /* ...tes styles existants... */
    animation: zoomRotateIn 1s cubic-bezier(0.23, 1, 0.32, 1);
}
@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
    }
}

.lili {
    /* ...tes styles existants... */
    animation: bounceIn 1s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}