Efecto brillante de neón

3,228 Sado0zii_Dev

Abrir en el editor Publica tu código

Recomendado

10 October 2025

Estructura HTML del contenedor de animación CSS

26 June 2024

Cambio de avión

11 August 2025

Contenedor de animación de mensajes HTML

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);
}