Home > Article > Web Front-end > How to create a sticky ball animation using HTML and CSS?
Sticky ball animation is an animation created using HTML and CSS. This animation style is created by using keyframes to specify CSS property values at different points in the animation, and then applying the animation to the HTML element.
Gooey balls is a popular and visually appealing animation style created using HTML and CSS. In this animation, we create a smooth, fluid and elastic effect for a round object, making it look like a ball made of slime. This type of animation is a great way to add interest and appeal to your website. With the following steps, we can easily create gooey balls animation in HTML and CSS.
First, we create the HTML structure used to create the sticky ball animation.
In this step we add css styles to the ball to make it look like a circle. To create the ball, we set the width and height of the ball and set the border radius to 50% to make it circular.
Here we will create keyframes for the animation. Keyframes are used to specify the values of CSS properties at different points in the animation.
Finally, we apply the animation to the ball.
With these simple steps, we can easily create a basic sticky ball animation using HTML and CSS. We can customize animations by changing the values of CSS properties, keyframes, and animation timing.
Sticky ball animation with background color change.
<!DOCTYPE html> <html> <head> <style> body{ text-align:center; } .gooey-ball { display: flex; justify-content: center; align-items: center; height: 50vh; } .ball { width: 100px; height: 100px; border-radius: 50%; background-color: #40e0d0; } @keyframes gooey { 0% { transform: scale(1); background-color: #40e0d0; } 50% { transform: scale(1.5); background-color: #ff00ff; } 100% { transform: scale(1); background-color: #40e0d0; } } .ball { animation: gooey 2s infinite ease-in-out; } </style> </head> <body> <h3>Gooey Ball Animation with Background Color Change</h3> <div class="gooey-ball"> <div class="ball"></div> </div> </body> </html>
In the example above, we created a ball that keeps repeating.
Here is an example of using HTML and CSS to create a sticky ball animation with a bouncing ball.
<!DOCTYPE html> <html> <head> <style> body{ text-align:center; } .gooey-ball { display: flex; justify-content: center; align-items: center; height: 70vh; } .ball { width: 100px; height: 100px; border-radius: 50%; background:radial-gradient(yellow, green, red); } @keyframes jump { 0% {transform: translateY(0);} 50% {transform: translateY(-50px);} 100% {transform: translateY(0);} } .ball { animation: gooey 2s infinite ease-in-out, jump 2s infinite ease-in-out; } </style> </head> <body> <h3>Gooey Ball Animation with a Jumping ball</h3> <div class="gooey-ball"> <div class="ball"></div> </div> </body> </html>
In the above example, we defined gooey and jumped two keyframes. The slimy keyframe animates the ball's scale from its original size to 1.5 times its original size and back. Jump keyframes animate the vertical position of the ball, making it jump up and down. Both animations are applied to the ball element, have a duration of 2 seconds, and have an ease-in and ease-out effect.
Creating sticky ball animations is a fun and easy way to enhance the visual appeal of your website. With a few lines of HTML and CSS code, we can add this cool effect to our website.
The above is the detailed content of How to create a sticky ball animation using HTML and CSS?. For more information, please follow other related articles on the PHP Chinese website!