El efecto de estrella resplandeciente es uno de los mejores efectos que se utiliza para sitios web con temas oscuros. Se conoce como efecto estrella porque tiene pequeñas bolas brillantes animadas de diferentes maneras que parecen estrellas. Este efecto se puede usar para el control deslizante de imágenes, el cargador y tal vez como un elemento de interfaz de usuario de exhibición.
Enfoque: el enfoque es crear pequeñas bolas usando una lista desordenada y luego animarlas usando fotogramas clave y la propiedad secundaria n-ésima. El conocimiento básico de estas dos propiedades es un requisito previo para continuar en este artículo.
Código HTML: En esta sección, hemos creado una lista desordenada.
<!DOCTYPE html> <html> <head> <title>GLOWING STAR EFFECT</title> </head> <body> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </body> </html>
Código CSS: Para CSS, siga los pasos a continuación:
- Paso 1: alinee la lista según sus necesidades. Hemos alineado la lista al centro de la página.
- Paso 2: elimina todos los estilos de lista y dales forma de círculo usando border-radius.
- Paso 3: use fotogramas clave para animar las bolas aumentando la escala. No hay una forma fija de hacer esto, puede cambiar la escala en diferentes marcos como desee.
- Paso 4: use la propiedad secundaria n-ésima para aplicar algún retraso entre la animación de cada elemento li.
Consejo: Este efecto es uno de los efectos más versátiles. Puede cambiar el tipo de animación en diferentes fotogramas o puede cambiar el retraso. Por lo tanto, pruebe diferentes valores de las propiedades que se utilizan en este artículo para encontrar la mejor animación para usted. Además, este efecto solo se ve bien en una página de tema oscuro, así que no lo use en sitios web de tema claro.
body {
background: rgb(70, 69, 69);
}
ul {
position: absolute;
top: 50%;
left: 50%;
display: flex;
}
ul li {
list-style: none;
width: 40px;
height: 40px;
background: #fff;
border-radius: 50%;
animation: animate 1.7s ease-in-out infinite;
}
@keyframes animate {
0%,
40%,
100% {
transform: scale(0.2);
}
20% {
transform: scale(1);
}
}
ul li:nth-child(1) {
animation-delay: -1.2s;
background: yellow;
box-shadow: 0 0 50px yellow;
}
ul li:nth-child(2) {
animation-delay: -1s;
background: rgb(99, 247, 136);
box-shadow: 0 0 50px rgb(99, 247, 136);
}
ul li:nth-child(3) {
animation-delay: -0.8s;
background: rgb(30, 243, 225);
box-shadow: 0 0 50px rgb(30, 243, 225);
}
ul li:nth-child(4) {
animation-delay: -0.6s;
background: rgb(241, 58, 58);
box-shadow: 0 0 50px rgb(241, 58, 58);
}
ul li:nth-child(5) {
animation-delay: -0.4s;
background: rgb(247, 61, 176);
box-shadow: 0 0 50px rgb(247, 61, 176);
}
Código completo: es la combinación de las dos secciones de código anteriores.
<!DOCTYPE html>
<html>
<head>
<title>GLOWING STAR EFFECT</title>
<style>
body {
background: rgb(70, 69, 69);
}
ul {
position: absolute;
top: 50%;
left: 50%;
display: flex;
}
ul li {
list-style: none;
width: 40px;
height: 40px;
background: #fff;
border-radius: 50%;
animation: animate 1.7s ease-in-out infinite;
}
@keyframes animate {
0%,
40%,
100% {
transform: scale(0.2);
}
20% {
transform: scale(1);
}
}
ul li:nth-child(1) {
animation-delay: -1.2s;
background: yellow;
box-shadow: 0 0 50px yellow;
}
ul li:nth-child(2) {
animation-delay: -1s;
background: rgb(99, 247, 136);
box-shadow: 0 0 50px rgb(99, 247, 136);
}
ul li:nth-child(3) {
animation-delay: -0.8s;
background: rgb(30, 243, 225);
box-shadow: 0 0 50px rgb(30, 243, 225);
}
ul li:nth-child(4) {
animation-delay: -0.6s;
background: rgb(241, 58, 58);
box-shadow: 0 0 50px rgb(241, 58, 58);
}
ul li:nth-child(5) {
animation-delay: -0.4s;
background: rgb(247, 61, 176);
box-shadow: 0 0 50px rgb(247, 61, 176);
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por sirohimukul1999 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA