CSS animation day 41이 되었습니다.

오늘은 자신이 좋아하는 표현 방법인 Gooey Effect를 사용한 Loading을 만듭니다.

Gooey는 무엇입니까? 자세한 내용은 이전 기사을 참조하십시오.

1. 완성판

2. 참고문헌

Code My UI
Gooey Loading Bar
눈물 - Gooey Effect with SVG filter
photoshopvip

3. 분해해 본다

❶.
마크업하자.

index.html

 <div class="container">
      <div class="gooey">
        <div class="circle"></div>
        <div class="circle"></div>
      </div>
      <svg>
        <defs>
          <filter id="filter">
            <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="blur" />
            <feColorMatrix
              in="blur"
              mode="matrix"
              values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7"
              result="filter"
            />
            <feBlend in="SourceGraphic" in2="blur" />
          </filter>
        </defs>
      </svg>
    </div>

styles.scss

body {
  margin: 0;
  padding: 0;
  background: #000;
  overflow: hidden;
}

.gooey {
  width: 100%;
  height: 100vh;
  text-align: center;
  filter: url("#filter");
}

.circle {
  display: inline-block;
  margin-top: 300px;
  margin-right: 20px;
  width: 40px;
  height: 40px;
  background: linear-gradient(45deg, #1488cc, #2b32b2);
  border-radius: 50%;
}

포인트로서,
・SVG 필터를 사용했습니다.
처음 본 사람은 이전 기사을 참조하십시오.

· div의 블록 요소를 가로로 정렬하고 중앙을 갖고 싶을 때 display: inline-block로 설정했습니다.
이제 text-align: center를 사용할 수 있습니다. text-align 는, 중앙에 맞추고 싶은 부모 요소에 붙이도록(듯이) 주의합시다.
살와카 기사가 매우 쉽습니다.

❷.
이제 애니메이션을 만들어 보겠습니다.

styles.scss

.circle:nth-child(1) {
  width: 40px;
  height: 40px;
  background: #00d2ff;
  transform: translateY(-10px);
  animation: move 3s linear infinite;
}

@keyframes move {
  50% {
    transform: translate(300px, -10px);
  }
}

제대로, Gooey Effect가 반영되고 있군요!
다만, 이 움직임은 단조롭고, 전혀 재미있지 않습니다. 어떤 애니메이션이 좋을까요?

❸.

그런 때는, 디즈니가 고안한 12의 애니메이션을 참조합시다.
follow through and overlapping action 을 사용합니다.

styles.scss

.circle:nth-child(1) {
  width: 40px;
  height: 40px;
  background: #1488cc;
  transform: translate(20px, 0px);
  animation: move 5s infinite cubic-bezier(0.64, -0.36, 0.1, 2);
}

@keyframes move {
  20% {
    border-radius: 0px;
    transform: skewX(30deg);
  }

  50% {
    transform: translate(330px, 0px);
  }
  100% {
    transform: scale(0.5);
  }
}

꽤 재미있는 움직임이되었습니다! 과연, 천하의 디즈니입니다!　
Loading 은 정말 안쪽이 깊고, 프런트 엔드 엔지니어의 실력의 차이가 명확하게 나오는 분야라고 생각합니다.　　

정진하겠습니다.
그럼 또 내일~