CSS animation에서 놀아버리다 - bird -

15074 단어 CSSanimation
CSS animation day10이 되었습니다.

오늘은 CSS 스프라이트를 도입한 새를 표현하고 싶습니다.

1. 완성판





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


2. CSS 스프라이트란?



스프라이트 이미지는 파라파라 만화 같은 이미지입니다. RPG에서는, 옛날부터 받아들여지고 있다고 합니다.





최근 몇 년 동안 이미지 최적화 기술에 CSS 스프라이트가 도입되었습니다.

이미지는 무겁고, 퍼포먼스 튜닝의 관점에서는 가장 힘을 넣어야 하는 곳입니다.

CSS 스프라이트는 앱 등에서 사용할 예정인 이미지를 모두 하나로 정리하여 요청 횟수를 줄이는 방법입니다.



자세한 것은 여기 의 기사나, 이쪽의 책 가 정리되어 있습니다.



3. 참고문헌



크리에이터 박스 매우 CSS를 알기 쉽게 정리하고 있습니다.



4. 분해해 본다



❶.

먼저 배경을 만듭니다.




index.html

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




styles.css

body {
  margin: 0;
  padding: 0;
  background-image: url("../img/forest.png");
}





❷.

어떻게 스프라이트 이미지를 애니메이션으로 만들 수 있습니까?




포인트는 2가지입니다.
1. 計算する





이전 이미지의 가로 너비는 918px이며 새 중 하나의 가로 너비는

918/5 = 183.6px입니다.



마찬가지로 이미지의 세로 폭은 506px이고 새의 세로 폭은

506/3 = 168.6 픽셀입니다.



이 값을 이미지의 width, height로 설정합니다.

게다가 @keyframes 100% 로 이 이미지를 background-position 로, 이동시킬 때, 제일 오른쪽의 새가, 제일 왼쪽으로 이동하면 좋기 때문에, 918px 를 설정하면 좋을 것 같습니다.



2. animation にstep を使う。

step에 대한 자세한 내용은 참고 문헌의 기사를 확인하십시오.

step(5) 로 하는 것으로, 단계적으로 파라파라 만화와 같이, 새가 이동합니다.　

이것들을 구사하여 해보자.



❸.




styles.css


.bird {
  background: url("../img/bird.png");
  width: 183.6px;
  height: 168.6px;
  animation: fly 1s steps(5) infinite;
}

@keyframes fly {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -918px 0;
  }
}





그러나 이번에는 날개가 상반부만 움직이기 때문에 하반부의 날개 애니메이션을 만듭니다. 이미지를 편집해야합니다.



❹.

Figma에서 편집한 이미지를 붙입니다.




styles.css

.bird {
  background: url("../img/birds.png");
  width: 162px;
  height: 168.6px;
  animation: fly 2s steps(14) infinite;
}

@keyframes fly {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -2587px 0;
  }





조금 엉망이지만 완성되었습니다.

그러면 마지막으로 이 새에 또 하나의 키프레임을 붙여 움직여 갑시다.




index.html

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




styles.css

.move {
  position: absolute;
  top: 0%;
  left: 0%;
  will-change: transform;
  animation: move 6s linear infinite;
}

@keyframes move {
  0% {
    transform: scale(0.3) translateX(-10vw);
  }

  10% {
    transform: translateY(2vh) translateX(10vw) scale(0.4);
  }

  20% {
    transform: translateY(0vh) translateX(30vw) scale(1);
  }

  30% {
    transform: translateY(4vh) translateX(50vw) scale(1.5);
  }

  40% {
    transform: translateY(2vh) translateX(55vw) scale(2);
  }

  50% {
    transform: translateY(0vh) translateX(60vw) scale(3);
  }

  60% {
    transform: translateY(0vh) translateX(50vw) scale(5);
  }

  80% {
    transform: translateY(0vh) translateX(60vw) scale(8);
  }
  100% {
    transform: translateY(0vh) translateX(100vw) scale(10);
  }
}





scale 과 transform, translate 를 사용하여 괴수 같은 새를 만들었습니다. 그럼 또 내일~!


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

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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