animation 에서 놀아 넘어뜨리다 - うねうね 애니메이션 -

11016 단어 CSSanimation
CSS animation day49입니다.
오늘은 border radius를 사용하여 애니메이션을 만듭니다.

1. 완성판





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


2. 왜?



디자인이 멋진 웹사이트를 찾고 있었는데 유체 디자인 사이트을 만났습니다.

개인적으로, 2019년에 대유행한다고 생각하고 있습니다.



그 안에서, 이 부끄러운 움직임을 발견했습니다.

순식간에 매료되어 도대체 이것은 어떻게 되어 있을까? 라고 생각한 것이, 이 CSS animation을 하려고 했던 계기입니다.



3. 참고문헌



9 Elements: CSS Border-Radius Can Do That?

border-radius

Uneune Generator



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="circle"></div>
    </div>
  </body>
</html>




styles.scss

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

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

.circle {
  width: 300px;
  height: 300px;
  background: linear-gradient(90deg, #00c6ff, #0072ff);
  border-radius: 50%;
}





보통 원이 생겼습니다.




❷.

border-radius를 만나보자.



참고문헌의 Uneune Generator 을 사용합니다.





스스로 원하는 모양으로 점을 이동하고 사용자 정의하고 border-radius를 설정합니다.




styles.scss

.circle {
  width: 300px;
  height: 300px;
  background: linear-gradient(90deg, #00c6ff, #0072ff);
  border-radius: 48% 69% 56% 53% / 47% 73% 43% 49%;
}





좋은 느낌의 형태가 되었습니다.



❸.

애니메이션을 붙이자.




styles.scss


.circle {
        　 ・・・
  animation: move 8s linear infinite;
}

@keyframes move {
  50% {
    border-radius: 80% 20% 59% 41% / 72% 21% 79% 28%;
  }

  75% {
    border-radius: 100% 69% 100% 83% / 68% 99% 53% 93%;
  }
}





참고 문헌의 웹 사이트와 같은 움직임이 되었습니다!

흥미롭네요. .



❹.

마지막으로, 중앙에 경치를 표시합시다.




index.html

 <body>
    <div class="container">
      <div class="circle">
        <div class="image"></div>
      </div>
    </div>
  </body>




styles.scss

.image {
  width: 300px;
  height: 300px;
  background: url("../img/sunset.png");
  background-size: cover;
  background-position: 35% center;
}




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



<script async=""src="https://static.codepen.io/assets/embed/ei.js"/>

border radius를 만지기만 하면 쉽게 멋진 effect를 만들 수 있네요.

CSS는 정말 깊은 곳입니다.

그럼 또 내일~


animation 으로 넘어뜨리다 - mask image -
animation 으로 놀기 - Particle Button 1-

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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