animation 으로 놀기 - StarWars -

12471 단어 CSSanimation
CSS animation day19가 되었습니다.

오늘은 CSS animation에서 스타 워즈를 만듭니다.

1. 완성판





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


2. 참고문헌



sitepoint



3. 분해해 본다



❶.

배경에 이전에 만든 스타을 사용합니다.




index.html

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

    <div class="titles">
      <div id="titlecontent">
        <p>Long time ago...
        </p>
      </div>
    </div>
  </body>
</html>




styles.css

body {
  height: 100%;
  overflow: hidden;
  background: #090a0f;
}

#content {
  position: absolute;
  color: #ffff70;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 40px;

}

#stars {
  width: 1px;
  height: 1px;
  background: transparent;
  transform: perspective(100px) rotateX(10deg);
  animation: star 50s linear infinite;
  box-shadow: 779px 1331px #fff, 324px 42px #fff, 303px 586px #fff,
    1312px 276px #fff, 451px 625px #fff, 521px 1931px #fff, 1087px 1871px #fff,
    36px 1546px #fff, 132px 934px #fff, 1698px 901px #fff, 1418px 664px #fff,
    1448px 1157px #fff,

                         ... 


@keyframes star {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-2000px);
  }
}





좋은 느낌입니다.



❷.

그렇다면 텍스트를 기울여 안쪽으로 향하게하려면 어떻게해야합니까?



결론에서 말하면, rotateX 하면 할 수 있을 것 같습니다.

스타로 해보자.




styles.css

body {
  height: 100%;
  overflow: hidden;
  background: #090a0f;
  transform: perspective(300px) rotateX(60deg) ;
}
#star{
  ...
}





화면 전체를 rotateX 하는 것으로, 안쪽으로 향하게 되었습니다.

그렇다면 이것을 텍스트에 적용합시다.




styles.css

#content {
  position: absolute;
  color: #ffff70;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) perspective(300px) rotateX(30deg);
  font-size: 40px;
}





오이타 좋은 느낌이 되었습니다.



❸.

이제 마지막으로이 텍스트에 애니메이션을 적용합시다.




styles.css

#content {
  position: absolute;
  color: #ffff70;
  top: 50%;
  left: 10%;
  transform: translate(-50%, -50%);
  font-size: 40px;
  animation: text linear 15s infinite;
}


@keyframes text {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-1000px);
  }
}





rotateX 는 이런 오쿠유키를 내고 싶을 때 사용하네요.　

매우 공부됩니다.

그럼 또 내일~


CSS animation으로 놀아 넘어뜨리는 -SVG Line -
animation에서 놀기 - Typewriter Effect -

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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