100일 CSS 챌린지 #9 : 비오는 밤

문제

https://100dayscss.com/days/9/

 

Rainy Night: The perfect time of day and the perfect weather to program in peace. The raindrops even shatter on the ground.
비오는 밤: 평화롭게 프로그램을 진행하기에 완벽한 시간과 완벽한 날씨입니다. 심지어 빗방울은 땅에 흩어집니다.

 

내 풀이

See the Pen 009 - Rainy Night by dobbyjang0 (@dobbyjang0) on CodePen.

가장 중요한 부분이었던 빗방울 만들기에 대해서 서술

 

빗방울 만들기

border-radius를 한쪽만 0, 나머지는 50%로 해서 한쪽만 뾰촉하고 다른 쪽은 둥근 모양을 만듦. 그리고 이를 똑바로 세우기 위해서 rotate(45deg)를 해줌. 이 과정을 원래 요소가 아닌 :after 요소에 해줘서 원래 요소에 적용할 애니메이션과 영향이 없게 만듬.

 

애니메이션 적용

우선 빗방울을 홀쭉하게 만들어주기 위해 scaleX(0.7)을 적용, 기울어서 떨어지게 돌려준다음 위에서부터 떨어지도록 함. 마지막 바닥에 닿았을 때는 scaleX를 늘리고 scaleY를 0으로 만들어 물방울이 바닥에 흩어지는 모습을 표현함.

 

타이밍과 위치

scss 반복문으로 위치를 균등하게 분포시켜준 다음, scss random 함수로 애니메이션 실행 시간과 시작 타이밍을 서로 어긋나게 해줌. animation-fill-mode로 애니메이션 시작 전에는 물방울이 나타나지 않도록 해줌.

 

예시 모범답안

See the Pen 009 - Rainy Night by Matthias Martin (@roydigerhund) on CodePen.