CSS animation에서 뛰어넘기 - snow -
요즘 추워요.
그래서 오늘은 눈을 표현하고 싶습니다.
1. 완성판
See the Pen snow village by hiroya iizuka ( @ 히로야 요시즈카 )
on CodePen .
2. 왜?
자연의 애니메이션을 도입하면 계절에 따라 디자인을 도입할 수 있기 때문입니다.
3. 참고문헌
htps //w w. 요츠베. 이 m/와 tch? v=이 fzyhj9응 HKQ&t=1s
눈의 무료 이미지
4. 분해해 본다
❶.
먼저 배경을 만듭니다.
<!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>
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;
}
조금 조금씩 그라데이션을 붙였다.
❷.
눈을 올립니다.
.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 로 나무에 쓰지 않게 합니다.
❸.
그럼 애니메이션을 넣자.
.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 로 하는 것으로, 덜컹거리는 일련의 애니메이션을 만든다.
그럼 또 내일!
Reference
이 문제에 관하여(CSS animation에서 뛰어넘기 - snow -), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/duka/items/99d85566ab8ce313bcb3텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)