animation 으로 놀기 - Glowing Loading -

10233 단어 CSSanimation
CSS animation day 41이 되었습니다.

이번부터 Loading 메뉴를 만들어 갑니다.

1. 완성판





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


2. 왜?



Loading에서 기다리는 시간은 정말 힘들지요.

이때 재미있는 애니메이션이 보이면 아무리 멋지겠죠. 외래의 대합에서도 그렇습니다만, 단지 기다리는 것이 아니라, 디즈니랜드와 같이, 기다리고 있는 동안에 어떻게 두근거릴 수 있는가가 매우 중요하다고 생각합니다.



3. 참고문헌



Glowing Gradient Loader Ring Animation Effects | CSS Animation Tutorial

CSS animation으로 플레이하기 - Beautiful Button -

CSS animation에서 놀아 버리다 - 태양 -



4. 분해해 본다



❶.

마크업하자.




index.html

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




styles.scss

body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000;
  height: 100vh;
}

.loader {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(#00c9ff, #92fe9d);
}





아름다운 원이 생겼습니다.




❷.



에서는 원의 중심에 공동을 만듭니다.




styles.scss

.loader :before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  background-color: #000;
  border-radius: 50%;
}





가짜 요소 before 클래스를 사용하여 중심에 검은 원을 만들었습니다.




❸.

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




styles.scss

.loader {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(#00f260, #0575e6);
  animation: roundMove 1s linear infinite;
}

@keyframes roundMove {
  100% {
    transform: rotate(360deg);
  }
}





좋은 느낌입니다.




❹.

그럼 마지막으로, blur를 걸자.




styles.scss

.loader :after {
  content: "";
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  z-index: -1;
  width: 110px;
  height: 110px;
  background: linear-gradient(#00f260, #0575e6);
  border-radius: 50%;
  filter: blur(20px);
}





완료!

simple이지만, 눈을 끄는 디자인으로, 질리지 않네요.



그럼 다시 내일~


animation에서 놀기 - Submit Button 2 -
animation 으로 놀기 - Gooey Loading -

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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