비전공자 개발일기

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

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

Profile Card  (0) 2022.04.28
Endless Road Animation  (0) 2022.04.26
Text Hover Effect & Shake On Invaild Input  (0) 2022.04.23
Shadow BTN  (0) 2022.04.22
Edge Motion  (0) 2022.04.20
'HTML _CSS' Related Articles more