Gradient Background Animation

HTML _CSS

Gradient Background Animation

HiroDaegu 2022. 4. 25. 00:37

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>Gradient BG Animation</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="animated-background"></div>
</body>
</html>

.animated-background {
 background: linear-gradient(to right, #833ab4, #fd1d1d, #fcb045);
  background-size: 400% 400%;
  animation: animate-background 10s infinite ease-in-out;
}

@keyframes animate-background {
  0% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

728x90

LIST