오늘은 동적으로 움직이는 그레디언트를 background-image로 적용하는 방법을 알아보겠습니다.
그레디언트 색상 예제는 위 링크를 통해서 선택할 수 있습니다.
<div id="root">
/* content */
</div>
#root {
width: 100%;
height: 100%;
background-image: linear-gradient(-30deg, #fbb7d4 0%, #a9d4ff 100%);
}
위 링크에서 받아온 background-image를 #root 태그에 적용해보았습니다.
원래 아무것도 없는 배경에서 그레디언트가 적용된 배경으로 변경된 것을 볼 수 있습니다.
이번에는 시간에 따라서 배경이 변하도록 구현해보도록 하겠습니다.
@keyframes gradientAnimation {
0% {
background-position: 10% 10%;
}
100% {
background-position: 90% 90%;
}
}
우선 @keyframe 프레임명 {}를 통해서 시간에 따른 애니메이션 시작 지점을 정해줍니다.
background-position을 통해서 애니메이션의 몇 % 진행되었을 때 가로 및 세로의 위치를 어디로 지정할지를 결정합니다.
background-position이 애니메이션 시작 지점(0%)일 때 0%, 0%를 사용하면 애니메이션 시작 시 하나의 색상이 화면 모두를 차지하므로 10% 정도 이동시켜 주었습니다.
#root {
width: 100%;
height: 100%;
background-image: linear-gradient(-30deg, #fbb7d4 0%, #a9d4ff 100%);
background-size: 200% 200%;
animation: gradientAnimation 4.5s linear infinite alternate;
}
이제 @keyframe으로 만든 프레임을 애니메이션으로 적용시켜주면 됩니다.
background-size: 200% 200%;
를 적용하여 배경이미지를 실제 이미지 레이아웃보다 크게 확장하였습니다.
배경 이미지가 실제 출력할 이미지 레이아웃보다 커야 시점을 이동하면서 바뀌는 것처럼 보이게 됩니다.
animation: gradientAnimation 5s linear infinite alternate;
을 통해 앞서 만든 @keyframe을 5초 동안 선형적으로 무한히 실행하도록 만들었습니다.
추가적으로 alternate를 적용하여 애니메이션이 끝나면(0%에서 100%까지 실행) 다시 0%로 바뀌는 것이 아니라,
역으로 재생하도록 구현하여 화면이 뚝 끊기는 것처럼 보이는 현상을 해결하였습니다.
적용한 움직이는 그레디언트가 배경으로 잘 적용되는 것을 확인할 수 있습니다.
[HTML/CSS] Header 화면 최상단에 고정시키는 방법 (1) | 2024.01.26 |
---|---|
[HTML/CSS] 외부 Font(TTF/OTF) 웹 페이지에 적용하기 (2) | 2023.11.01 |
[Error] DOMException: play() failed because the user didn't interact with the document first 해결 방법 (0) | 2023.09.27 |
[HTML/CSS] 화면 백그라운드에 영상 넣기 (feat. React 적용법) (1) | 2023.09.26 |
[HTML / CSS] 선택자 (Selector) 문법 정리 (1) | 2023.04.13 |