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

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

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