비전공자 개발일기

Bouncing Ball 본문

HTML _CSS

Bouncing Ball

HiroDaegu 2023. 2. 7. 00:20
728x90
SMALL

<!DOCTYPE html>
<html lang="ko">

<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>BOUNCING BALL</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="wrapper">
        <div class="ball"></div>
    </div>
</body>

</html>
body {
    background-color: #333;
  }
  
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    height: 23rem; 
    background-color: #333;
    overflow: hidden;
  }
  
  .wrapper::before {
    background-color: #FFF;
    content: "";
    position: absolute;
    border-radius: 1rem;
    height: 0.15rem;
    left: 2rem;
    right: 2rem;
    bottom: 2rem;
  }
  
  .wrapper .ball {
    background-color: #FFF;
    border-radius: 50%;
    width: 3rem;
    height: 3rem;
    position: absolute;
    animation: ballMovement 1.6s cubic-bezier(0, 0.98, 1, 0.99) infinite;
    bottom: 2.1rem;
    transform: translate(14rem, -15rem) scale(1.2, 0.5);
    transform-origin: bottom;
  }
  
  @keyframes ballMovement {
    0% {
      transform: translate(14rem, -15rem);
    }
    15% {
      transform: translate(7rem, 0rem) scale(1.2, 0.5);
    }
    30% {
      transform: translate(2rem, -10rem) scale(1, 1);
    }
    45% {
      transform: translate(-2rem, 0rem) scale(1.2, 0.8);
    }
    60% {
      transform: translate(-5rem, -5.5rem) scale(1, 1);
    }
    75% {
      transform: translate(-8rem, 0rem) scale(1.1, 0.9);
    }
    100% {
      transform: translate(-14rem, -3rem) scale(1, 1);
    }
  }
728x90
LIST

'HTML _CSS' 카테고리의 다른 글

Confetti Text Effect  (0) 2023.02.09
Send Button Animation  (0) 2023.02.08
Pulse effect on button hover  (0) 2023.02.06
Cocacola  (0) 2023.02.05
Movie Streaming Website  (0) 2023.02.04
'HTML _CSS' Related Articles more