728x90 반응형 pointer-events1 [CSS] 움직이는 하늘 배경 만들기 (linear-gradient, background-position, keyframes animation + pointer-events ) 나무 가득한 화면을 만들어보고 싶다는 생각이 문득 들어서, 가지고 있던 어두운 나무 png파일을 이용하여 숲을 조성(?)했다. 그런데 그냥 하늘을 하자니 너무 심심한 것 같아서, gradient를 준 background에 애니메이션을 추가하면 어두운 하늘, 밝은 하늘 등을 나타낼 수 있지 않을까하는 생각에 적용해봤더니 의외로 괜찮은 것 같았다. 구현된 모습 How-To 위와 같이 배경에 애니메이션을 주는 것의 요지는 아래 두가지이다: 1. 배경을 오버 사이즈로 크게 만든다. 2. 화면에 나오는 배경 부분을 keyframes를 통해 바꿔준다. 즉, 우리 눈에 보이는 뷰 사이즈보다 크게 만든 배경의 다른 부분들을 천천히 움직이면서 집중 조명(?)해주는 방식이라고 생각하면 된다. CSS 태그 하나가 화면을 가.. 2021. 6. 4. 이전 1 다음 728x90 반응형
