animation 으로 놀기 - Particle Button 1-

18855 단어 CSSanimation
CSS animation day 50이 되었습니다.

드디어 50일. 다음은 100일을 목표로 합니다.
한 걸음 한 걸음 소중하네요.

오늘은 Codepen에서 발견 한 멋진 작품의 Particle Button을 만듭니다.

1. 완성판





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


2. 참고문헌



CSS Fizzy Button

CSS Particle Button



3. 분해해 본다



❶.

마크업하자.




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




styles.scss

body {
  margin: 0;
  padding: 0;
  background: #2c3940;
}

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

.button {
  width: 200px;
  height: 48px;
  background: transparent;
  color: #fff;
  line-height: 48px;
  text-align: center;
  font-size: 12px;
  border: 2px solid #fff;
  border-radius: 2px;
}








❷.

hover 애니메이션을 붙여 봅시다.

hover하면




1: 박스의 색이 바뀐다

2: 아이콘이 나타난다

3: Downloads 편지가 오른쪽으로 벗어난다

4: icon이 아래에서 나타난다

5: 파티클이 나타난다




하자.

우선 1-3까지 만들어 봅시다.




index.html

 <div class="container">
      <div class="button">
        <span>Downloads</span>  //追加
      </div>
 </div>




styles.scss

.button {
  width: 200px;
  height: 48px;
  background: transparent;
  border: 2px solid #fff;
  border-radius: 2px;
  transition-duration: 0.2s;

  &:hover {
    animation: hoverEffect 1s ease;
    box-shadow: 220px 0px 20px #fff inset;

    span {
      transform: translateX(25px);
      transition-duration: 0.3s;
      color: #000;
    }
  }
}





좋은 느낌입니다.



4:

fontawsome을 사용하여 다운로드 버튼을 표시합니다.

fontawsome 의 사용법을 모르는 분은 여기 를 참조하십시오.




index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="css/styles.css" />
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.7.1/css/all.css"
      integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <div class="container">
      <div class="button">
        <span>Downloads</span>
        <i class="fas fa-download"></i>
      </div>
    </div>
  </body>
</html>





아이콘이 나왔습니다.

그럼 button 을 hover 하면, 아이콘이 출현하도록 합시다.




styles.scss


  &:hover {
          ・・・
    i {
      opacity: 1;
      transition-duration: 0.3s;
      transform: translate(42px, -36px);
    }
  }
}

i {
  opacity: 0;
  transform: translate(42px, -26px);
}








❸.

5: 파티클을 내보냅니다. 여기가 제일의 난관입니다.

지난번 의 기사를 참조해 주세요.




index.html


<div class="container">
  <div class="button">
      <span>Downloads</span>
      <i class="fas fa-download"></i>
    <div class="particles">
      <div class="particle"></div>
      <div class="particle"></div>
                ・
　　　　　　　　　 ・
　　　　　　　　　 ・
　　　　　　　　　×　100 
    </div> 
  </div> 
</div>




styles.scss

  &:hover {
        ・・・
    .particle {
      opacity: 1;
      animation:  particle 2s ease-out 0.1s infinite
    }
  }
}

.particles {
  position: absolute;
  top: 0;
  left: -100px;
  width: 300px;
  height: 100px;
  z-index: -1;
  .particle {
    display: inline-block;
    opacity: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #fff;
    @for $i from 1 through 100 {
      &:nth-child(#{$i}) {
        transform: translate(random(100) * 1vw, random(100) * 1vh);
        background: hsl(random(360), 100%, 65%);
      }
    }
  }
}

@keyframes particle {
  0% {
    transform: translate(45vw, 42vh);
  }
  20% {
    opacity: 0.5;
  }

  60%,
  100% {
    opacity: 0;
  }
}





particle을 button의 중앙에 100개 모으고 z-index:-1로 뒤쪽으로 돌립니다.

이것은 버튼 안쪽에 파티클이 날지 않도록 하기 때문입니다.

particle은 이전 기사와 같이 roop 문과 random() 을 사용하여 hsl로 설정합니다.



상당히 화려한 움직임입니다만, microinteraction 로서는, 아직도 완성도는 낮습니다.

hover 때 피드백의 연출이 너무 몹시 불쾌감을 줄 수 있습니다.

더 효과적인 버튼이 되려면 어떻게 해야 합니까? 길어질 것 같아서 계속은 다음 번입니다.



그럼 다시 내일~


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

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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