La animación de la bola giratoria se puede crear fácilmente usando la propiedad de transformación para rotar la bola. El recuento de iteraciones de la animación se aplica como infinito para obtener la animación giratoria interminable. Para obtener el efecto brillante, se usa box-shadow.
PASOS:
- Cree un archivo HTML con el nombre index.html.
- Cree un elemento div en el archivo index.html y proporcione un nombre de clase ball .
- Agregue estilo a este nombre de clase.
- Cree una animación llamada spinball usando la regla @keyframes. Usa la propiedad de transformación para rotar la bola.
- Aplique una combinación de inserción de 2 colores en la propiedad box-shadow para obtener el efecto giratorio brillante.
- La velocidad de giro se puede ajustar cambiando la duración de la animación.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Spinning Ball Animation</title>
<style>
* {
background-color: black;
}
.ball {
height: 40px;
width: 40px;
border-radius: 100px;
position: fixed;
top: 50vh;
left: 50vw;
animation: spinBall 0.13s linear infinite;
box-shadow: inset 0 0 18px #fff,
inset 6px 0 18px violet,
inset -6px 0 18px #0ff,
inset 6px 0 30px violet,
inset -6px 0 30px #0ff,
0 0 18px #fff, -4px
0 18px violet, 4px 0 18px #0ff;
}
@keyframes spinBall {
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="ball"></div>
</body>
</html>
Producción:
Animación de bola giratoria
Publicación traducida automáticamente
Artículo escrito por vivshubham y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA