CSS animation에서 놀아 쓰러지다 - 시즈쿠 Gooey Effect-

11704 단어 CSSanimation
CSS animation day13이 되었습니다.

오늘은 물방울과 같은 표현 ( Gooey Effect )에 대해입니다.

1. 완성판





See the Pen Gooey Effect by hiroya iizuka ( @ 히로야 요시즈카 )
on CodePen.


2. Gooey Effect란?



슬라임과 같은 수은과 같은 것이 누멧과 움직이는 표현입니다.

표현의 방법에 대해서는, 포인트가 3개 있습니다.






1 배경에 Blur를 걸어 경계를 흐리게





2 contrast를 붙여 그 흐릿한 윤곽의 콘트라스트를 붙이기





무슨 일이 일어났는가?



배경의 경계가 강제적으로 흐려져 버리는 곳에 던져진 원들은, 그대로 그 윤곽은 흐려져 버립니다. 그러나 여기에서 콘트라스트라는 구세주에 의해 원의 윤곽은 명료하게 흑백 분명하지만, 경계가 모호했던 곳까지 드디어 분명하게 버린 느낌입니다.



여기의 블로그에 따르면 CSS에서는 배경을 한색으로 한정해야 했고, SVG 애니메이션이 범용성이 있어 추천이라는 것이었습니다.



3. 참고문헌



Engineer Blog

CSS Tricks

UNORTHODOX WORKBOOK



4. 분해해 본다



❶.

그럼 가자.




index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="css/styles.css" />
  </head>
  <body>
    <div class="container">
      <div class="gooey">
        <div class="circle"></div>
        <div class="circle"></div>
      </div>
    </div>
  </body>
</html>




styles.css


body {
  margin: 0;
  padding: 0;
}

.container {
  width: 100%;
  height: 100vh;
  align-items: center;
  justify-content: center;
  display: flex;
}

.gooey {
  position: relative;
  width: 500px;
  height: 500px;
  margin: 0 auto;
  filter: blur(10px) contrast(5);
  background: blue;
}



아래 준비하지만

display: flex 로 수평 방향으로 병렬로 늘어놓습니다.

alignItems: center에서 상하 중앙으로, justify-content: center 로 좌우 중앙으로 합니다. flexbox에 대한 자세한 내용은 여기을 참조하십시오.





그리고, 배경에 gooey effect 를 위한 설정을 합니다.

blur와 contrast를 붙였습니다.




❷.

그럼, 원을 2개 만들어 봅시다.




styles.css

.circle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  height: 120px;
  margin: auto;
  background: #fff;
  border-radius: 50%;
}

.circle:first-child {
  right: 50%;
}

.circle:nth-child(2) {
  left: 50%;
}





좋은 느낌으로, 연결되어 있네요.

마지막으로 Hover로 움직입니다.




❸.




styles.css


.circle:first-child:hover {
  animation: move 1s ease;
}

@keyframes move {
  0% {
    transform: translateX(0px);
  }
  10% {
    transform: translateX(50px);
  }
  30% {
    transform: translate(20px, -80px) scale(1.3, 1.3);
  }
  50% {
    transform: translate(20px, 50px);
  }
  60% {
    transform: translate(20px, 0px);
  }
  80% {
    transform: translate(-20px, 0px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}





또한, animation-timing function 에서는, 애니메이션의 개시와 종료가 매끄러워지는,ease 가 상당히 궁합이 좋다고 느꼈습니다.



내일은 이 Gooey Effect를 적용하여 눈물을 만듭니다.

그럼 또!


CSS animation에서 놀아버리다 - bird -
CSS animation에서 놀아 버리기- 눈물- Gooey Effect with SVG filter

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage