Effet lumineux néon

2,884 Sado0zii_Dev

Ouvrir dans l'éditeur Publiez votre code

Recommandé

13 June 2025

Effet de survol des cartes

12 September 2025

Effet d'animation CSS Circle Glow

25 September 2023

Effet de bouton bubble

HTML

CSS

body{
    margin: 0;
    padding: 0;
    background-color: black;
}
ul{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
    margin: 0;
        padding: 0;
     display: flex;
}
ul li{
    list-style: none;
    width: 40px;
    height: 40px;
    background: white;
    border-radius: 50%;
    animation: glow 1.6s ease-in-out infinite;
}
@keyframes glow{
    0%,40%,100% {
        transform: scale(0.2);
    }
    20%{
        transform:scale(1);
    }
}
ul li:nth-child(1){
    animation-delay: -1.4s;
    background: yellow;
    box-shadow:0 0 50px yellow;
}
ul li:nth-child(2){
    animation-delay: -1.2s;
    background: red;
    box-shadow:0 0 50px red;
}
ul li:nth-child(3){
    animation-delay: -1s;
    background: green;
    box-shadow:0 0 50px green;
}
ul li:nth-child(4){
    animation-delay: -0.8s;
    background: orangered;
    box-shadow:0 0 50px orangered;
}
ul li:nth-child(5){
    animation-delay: -0.6s;
    background: blue;
    box-shadow:0 0 50px blue;
}
ul li:nth-child(6){
    animation-delay: -0.4s;
    background:purple ;
    box-shadow:0 0 50px purple;
}
ul li:nth-child(7){
    animation-delay: -0.2s;
    background: rgb(212, 6, 199);
    box-shadow:0 0 50px rgb(212, 6, 199);
}