html Archives - SkilloTour https://skillotour.in/tag/html/ Website to upgrade your skills Mon, 30 Dec 2024 02:41:33 +0000 en-US hourly 1 https://wordpress.org/?v=6.9 https://skillotour.in/wp-content/uploads/2025/01/cropped-apple-touch-icon-1-32x32.png html Archives - SkilloTour https://skillotour.in/tag/html/ 32 32 Bouncing Ball Animation in CSS https://skillotour.in/2024/12/28/bouncing-ball-animation-in-css/ https://skillotour.in/2024/12/28/bouncing-ball-animation-in-css/#comments Sat, 28 Dec 2024 17:25:47 +0000 https://skillotour.in/?p=85 In this article, let us discuss cool bouncing ball animation using CSS. Code in CSS Below is the code for the cool bouncing ball animation using CSS. Output: Explanation HTML CSS How to Use You can learn more about CSS here. You can also read 5 important Digital Tools for every competitive exam aspirant.

The post Bouncing Ball Animation in CSS appeared first on SkilloTour.

]]> In this article, let us discuss cool bouncing ball animation using CSS.

Code in CSS

Below is the code for the cool bouncing ball animation using CSS.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bouncing Ball Animation</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      margin: 0;
      background: linear-gradient(45deg, #ffe3ce, #fad0c4);
      overflow: hidden;
      font-family: Arial, sans-serif;
    }
    .ball {
      width: 50px;
      height: 50px;
      background: #e93a92;
      border-radius: 50%;
      position: relative;
      animation: bounce 2s infinite ease-in-out;
    }
    @keyframes bounce {
      0%, 100% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-200px);
      }
    }
  </style>
</head>
<body>
  <div class="ball"></div>
</body>
</html>

Output:

Explanation

HTML

  • The div element with the class ball represents the bouncing ball.

CSS

  • @keyframes bounce defines the animation that makes the ball move up and down.
  • The animation property applies the bounce effect with a 2-second duration and infinite repetitions.
  • linear-gradient is used to add an attractive background.

How to Use

  1. Copy the code into a .html file.
  2. Open the file in a browser to see the animation in action.
  3. Customize the animation timing, size, or colors as you like.

You can learn more about CSS here.

You can also read 5 important Digital Tools for every competitive exam aspirant.

The post Bouncing Ball Animation in CSS appeared first on SkilloTour.

]]> https://skillotour.in/2024/12/28/bouncing-ball-animation-in-css/feed/ 1 85