CSS animation에서 뛰어넘기 - snow -

11193 단어 CSSanimation
CSS animation day8이 되었습니다.

요즘 추워요.

그래서 오늘은 눈을 표현하고 싶습니다.

1. 완성판





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


2. 왜?



자연의 애니메이션을 도입하면 계절에 따라 디자인을 도입할 수 있기 때문입니다.



3. 참고문헌



htps //w w. 요츠베. 이 m/와 tch? v=이 fzyhj9응 HKQ&t=1s

눈의 무료 이미지



4. 분해해 본다






❶.



먼저 배경을 만듭니다.




index.html

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




styles.css

body {
  margin: 0;
  padding: 0;
  background: linear-gradient(black, gray);
}

section {
  background: url("../img/back.png") no-repeat;
  background-size: cover;
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
}





조금 조금씩 그라데이션을 붙였다.




❷.

눈을 올립니다.




styles.css

.snow1 {
  background-size: cover;
  background: url("../img/snow.png");
  width: 100%;
  height: 100vh;
  position: absolute;
  opacity: 0.6;
  z-index: -1;
  top: 0;
  left: 0;
}

.snow2 {
  background-size: 100px;
  background: url("../img/snow2.png");
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
}





눈에 깊이를 붙이기 위해서, snow.png 의 opacity를 내리고, z-index 로 나무에 쓰지 않게 합니다.






❸.

그럼 애니메이션을 넣자.




styles.css


.snow1 {
  background-size: cover;
  background: url("../img/snow.png");
  width: 100%;
  height: 100vh;
  position: absolute;
  opacity: 0.4;
  z-index: -1;
  top: 0;
  left: 0;
  filter: blur(3px);
  animation: snow1 30s infinite linear;
}

.snow2 {
  background-size: cover;
  background: url("../img/snow2.png");
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  animation: snow2 10s infinite linear;
}

@keyframes snow1 {
  0% {
    backgroud-position: 0px 0px;
  }
  100% {
    background-position: 0px 2400px;
  }
}

@keyframes snow2 {
  0% {
    backgroud-position: 0px 0px;
  }
  100% {
    background-position: 0px 1417px;
  }
}





·포인트는 2개

1. 遠近感を出す 하기 위해서, 멀리의 snow.png에 blur를 걸어, 떨어지는 2개의 눈의 속도에 차이를 붙여, 패럴랙스 효과를 낸다.



2. それぞれの画像の縦幅を、keyframesのbackground-positionに設定 하고 animation iteration count 를 infinite 로 하는 것으로, 덜컹거리는 일련의 애니메이션을 만든다.



그럼 또 내일!


CSS animation으로 뛰어넘기다 - cloud -
CSS animation에서 놀아 버리다 - bubble -

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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