Spinning ball animation can be easily created using the transform property to rotate the ball. The animation iteration count is applied as infinite to get the never-ending spinning animation. To get the glowing effect, box shadow is used.
STEPS:
- Create an HTML file with the name index.html.
- Create a div element in the index.html file and give a class name ball.
- Add style to this class name.
- Create an animation named spinball using the @keyframes rule. Use the transform property to rotate the ball.
- Apply 2 color inset combination in the box-shadow property to get the glowing spinning effect.
- The spinning speed can be adjusted by changing the animation duration.
Example: Here is the implementation of the above-explained steps.
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>
|
Output:
Spinning Ball Animation
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
15 May, 2023
Like Article
Save Article