100일 CSS 챌린지 #8 : 메타볼

문제

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

 

Metaballs: At first glance impossible to implement with CSS, but filters make this possible too.
메타볼: 언뜻 보기에는 CSS로 구현하는 것이 불가능해 보이지만, 필터를 사용하면 구현 가능합니다.

 

내 풀이

겉모습만 보고 어떻게 만들지 감이 안 잡혀서 그대로 보고 분석하며 따라 하는 식으로 해봤다.

See the Pen 008 - Metaballs by dobbyjang0 (@dobbyjang0) on CodePen.

 

filter

filter 속성은 흐리게 하거나 색대비를 증가하거나 하는 등의 그래픽 효과를 해당 요소에 적용시켜 준다. 해당 문제에서는 경계가 흐릿한 도형들을 움직이게 만든 다음, 대비(contrast) 필터를 씌워 겹치는 부분이 마치 액체가 합쳐지는 것과 같은 효과를 만들었다. (위 풀이에서 배경을 클릭하면 필터가 씌워지지 않은 상태를 볼 수 있음) 또 blur 효과로 경계선을 흐리게 만들어 마치 radial-gradient를 한 것과 같은 효과를 만들어냈다.

 

translate3d(0, 0, 0)

요소에 아무 이동도 가하지 않는 transform 효과지만, 3d transform으로 인식되어 GPU 처리 가속화가 된다고 한다.

 

요소 기본값 설정하기

애니메이션으로 0deg부터 360deg 까지 회전하는 transform을 설정해 준 다음, 시작 시 기본값 각도를 서로 다르게 해주고 싶다 해보자. 원래 요소에 애니메이션을 설정해 준다면, 요소에 transform 속성을 설정해 준다 하더라도, 애니메이션 시작값이 0deg이기 때문에 무조건 0deg부터 시작하게 된다.

 이때 설정해 줄 수 있는 방법이 원래 요소에 transform을 설정해 준 후, 애니메이션은 :after나 :before 요소에 설정해 주는 것이다. 그럼 해당 요소는 시작부터 원래요소만큼 돌아가있게 된다. 문제에서는 원래 요소에 random 함수를 이용하여 랜덤으로 초기 돌아간 각도를 설정해 주었다.

 

예시 모범답안

See the Pen 008 - Metaballs by Matthias Martin (@roydigerhund) on CodePen.