Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create gooey balls animation using HTML & CSS?
Gooey balls animation is a type of animation that is created using HTML and CSS. This animation style is created by specifying values of CSS properties at different points in the animation using keyframes, and then applying the animation to the HTML element.
Gooey balls are a popular and visually appealing animation style created using HTML and CSS. In this animation we create a smooth, flowing and squishy effect to a circular object, making it look like a ball made of goo. This type of animation is a great way to add a fun and engaging touch to the website. By using the following steps, we can easily create gooey balls animation in HTML and CSS.
Step 1 - Create HTML code for gooey balls animation
First, we create the HTML structure for creating a gooey balls animation.
Step 2 - Add CSS styling
In this step we add css style to the ball to make it look like a circle. To create the ball, we set the width and height of the ball, and also set the border-radius to be 50% to make it circular.
Step 3: Create keyframes
Here, we will create keyframes for the animation. Keyframes are used to specify the values of CSS properties at different points in the animation.
Step 4: Apply Animation
Finally, we apply the animation to the ball.
With these simple steps, we can easily create a basic gooey balls animation using HTML and CSS. We can customize the animation by changing the values of CSS properties, keyframes, and animation timings.
Example 1
Gooey 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 above example, we created a ball that keeps repeating.
Example 2
Here is an example to create a gooey ball animation with a jumping ball in HTML and CSS.
<!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 define gooey and jump two keyframes. The gooey keyframe animates the scale of the ball from its original size to 1.5 times its original size and back. The jump keyframe animates the vertical position of the ball, causing it to jump up and down. Both animations are applied to the ball element with a duration of 2 seconds and an ease-inout easing effect.
Conclusion
Creating gooey balls animation is a fun and simple way to enhance the website’s visual appeal. With a few lines of HTML and CSS code, we can add this cool effect to the website.
304 Views
