search

Home >Web Front-end >HTML Tutorial >How to create a sticky ball animation using HTML and CSS?

How to create a sticky ball animation using HTML and CSS?

PHPz
PHPzforward
2023-08-28 10:21:061122browse

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.

Step 1 - Create HTML code for sticky ball animation

First, we create the HTML structure used to create the sticky ball animation.

Step 2 - Add CSS styles

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.

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 sticky ball animation using HTML and CSS. We can customize animations by changing the values ​​of CSS properties, keyframes, and animation timing.

Example 1

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.

Example 2

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.

in conclusion

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!

css html 对象
Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：How to convert Unicode values ​​to characters in JavaScript?Next article：How to convert Unicode values ​​to characters in JavaScript?

Related articles

See more