Pure CSS Gradient Background Animation 그라데이션 배경 에니메이션 happycgi

회원가입

출석체크

마이페이지

CGIMALL

jquery , CSS , PHP , Javascript , 무료폰트 , ASP

홈 > CSS > 기타효과 > Pure CSS Gradient Background Animation 그라데이션 배경 에니메이션 상세정보

클라우드태그

Javascript

PHP

CSS

ASP

jquery

slide

html

??????

무료폰트

게시판

메뉴

슬라이드

臾대즺�고듃

현재접속자 명

Pure CSS Gradient Background Animation 그라데이션 배경 에니메이션

해피팀

네티즌

소스분류

기타효과

다운로드 횟수

5 회

간단설명

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

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