HTML _CSS

Number Fill Animation

HiroDaegu 2022. 12. 22. 00:47
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>NUMBER FILL ANIMATION</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <p class="number">2,000,000,000</p>
</body>

</html>
:root {
    --color-green-200: #197302;
    --color-green-600: #36FE04;
  }
  body {
    background: #000;
    display: grid;
    height: 100vh;
    min-height: 100dvh;
    place-items: center;
  }
  
  .number {
    color: #f09;
    font-size: 10vw;
    font-weight: bold;
    background-image: 
      linear-gradient(var(--color-green-600), var(--color-green-600)),
      linear-gradient(var(--color-green-200), var(--color-green-200));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    background-size: 0% 100%, 100% 100%;
    background-repeat: no-repeat, no-repeat;
    
    animation: fill 20s linear infinite;
  }
  
  @keyframes fill {
    to {
      background-size: 100% 100%, 100% 100%;
    }
  }
728x90
LIST