웹솔루션개발 22년 노하우! 해피CGI의 모든것

[해피CGI][cgimall] Pure CSS Gradient Background Animation 그라데이션 배경 에니메이션 본문

웹프로그램밍 자료실/기타 자료

[해피CGI][cgimall] Pure CSS Gradient Background Animation 그라데이션 배경 에니메이션

해피CGI윤실장 2021. 3. 26. 09:23

css 만으로 그라데이션 배경 에니메이션을 구현하기

 

 

 

 

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%;
   }
}



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%;
}
}


에니메이션 효과시 배경이미지의 위치입니다.

 

 

 

홈페이지바로가기

Comments