DAY #8
- 문제
👉 문제 바로가기
Metaballs: At first glance impossible to implement with CSS, but filters make this possible too.
Metaballs: 언뜻 보기에는 CSS로 구현하는 것이 불가능하지만 필터를 사용하면 구현도 가능합니다.
롸? 이게 모야... 정말 이게 CSS로 구현이 가능하다고??
필터를 사용한다는게 무슨 말이지???
초장부터 1도 모르겠다 😑
🤔... 일단 이렇게는 만들었음. 자 이제 무얼 해야하지?
일단 다른 원을 하나 더 만들어 보자.
그냥 요소와 요소를 붙여 놓으면 저 커다란 중심 원에서 작은 원이 ✨떨어져 나오는 것✨과 같은 효과를 줄 수가 없다!!
이것을 어떻게 저렇게 물방울 떨어지듯 자연스럽게 만드는지 정말 의문이었다....
😵😵
아니 정말 모르겠어서 어쩔수 없이 공부한다!! 생각하고 정답을 참고했음.
참고하니 정말 도움이 되었다!!
👉 .center 에 ✨blur✨ 처리하기
<div class="frame">
<div class="center">
<div class="waterdrop"></div>
<div class="bubble1"></div>
</div>
</div>.center {
filter: blur(8px);
}일단 .center 에 블러 처리를 8px 정도 해주었다.
그러면 저렇게 뿌옇게 흐림처리가 된다.
👉 .frame 에 ✨contrast✨ 처리하기
.frame {
filter: contrast(30);
}.center를 감싸고 있는 .frame 에 대비처리를 해주었다.
📝 filter: contrast()
contrast() 함수는 주어진 이미지의 대비를 조정합니다. 0%일 경우 완전히 회색 이미지가 되고, 100%일 경우 이미지가 그대로 유지됩니다. 100%보다 큰 값도 허용되며, 이때는 대비가 더 큰 이미지가 생성됩니다. 보간 시 누락값은 1입니다.
출처: MDN Web Docs
이러한 단계로 필터를 씌어 보니, 어떠한 원리로 저러한 모양이 나오는지 알 수 있었다!!
요소를 블러처리로 뿌옇게 만들어 두 요소의 간극을 부드럽게 만들어준 상태에서, 요소의 부모에 대비를 걸어주어 흐림을 없애고 형태를 만들어 주면 이러한 모양이 완성된다...!!!! 😮👍
이런 방법은 어떻게 생각한거지?!
아무래도 포토샵 필터 많이 만져본 사람이 생각해낸게 분명하다..
@keyframes bubbles {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}그리고 bubble들을 더 만들어서 (나는 총 12개를 만듦)
위의 애니메이션을 적용해주면 되는데,
방울들이 나오는 시간차와 방향만 조절해 주면 된다!!
시간차는 animation-delay 를 이용하여 조절하고,
방울들이 움직이는 방향은 transform-origin 을 사용하면 된다!!
마구잡이로 랜덤하게 12개의 방울들이 나오는 시간차와 방향을 돌려주었다.
- 내가 만든 CHALLENGE Code
- 결과물
이번 문제는 만들면서도 참 신기한 문제였다 ㅋㅋ
이걸 생각해낸 사람도 대단하다 생각함...
코드가 조금 지저분하긴 한데, 다음번에는 SCSS의 장점중 하나인 @include @mixin 등을 사용하거나, @for문을 돌려서 조금은 덜 지저분하게 짜보아야겠다!!
끝
