CSS로 그라디언트 백그라운드 색변화 (J쿼리 없이 그라데이션 색변경)

웹접근성과 웹표준

CSS로 그라디언트 백그라운드 색변화 (J쿼리 없이 그라데이션 색변경)

netyhobby 2021. 7. 1. 15:08

css3 transition과 css3 animation을 잘 활용하자.

<!DOCTYPE html>
<html>
<head>

  <style>
body {
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
}

@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
  </style>
</head>
<body>
  <div></div>
</body>
</html>