CSS animation으로 뛰어넘기다 - cloud -

9217 단어 CSSanimation
CSS animation day7이 되었습니다.

조금은 CSS animation에 익숙해졌지만, 아직 바닥없이 늪의 느낌이 있습니다.

오늘은 구름을 표현하고 싶습니다.

1. 완성판





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


2. 왜?



구름을 도입하여 사이트에 엄숙한 인상을 풍기거나

신기하고 매력적인 느낌을 표현할 수 있습니다.



유명한 멋진 웹사이트이지만



사가와 신사

magic leap



이런 디자인은 보는 것을 정말 매료하네요!



3. 참고문헌



youtube

구름을 여기에서 다운로드



4. 분해해 본다



❶.

이제 화면에 구름을 넣자.




index.html

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

</body>
</html>




styles.css

body{
    margin: 0;
    padding: 0;
    background: #090a0f
}

.cloud{
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height:100%;
    background: url('../img/clouds.png');
    background-size: cover;
}





포인트 1개

・background-size :cover
ダウンロードした画像の縦横比はそのままで、背景をちゃんと覆う最小サイズになるように設定されます。



❷.

구름 이동




styles.css

.cloud{
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height:100%;
    background: url('../img/clouds.png');
    background-size: cover;
    animation: cloud 60s linear infinite;
}

@keyframes cloud{
    0%{
        background-position: 0px;
    }

    100%{
          background-position: 5440px;
    }

}





포인트 2개

・animation의 움직이는 시간(60s)은 천천히 쪽이, 엄격한 느낌이 나올 것 같습니다.

・background-position
100% の設定に、画像の横幅のサイズを書くことで、画像上を左から右までフルに動きます



❸.

역방향으로 흐르는 천천히 눈 구름을 추가합니다.




styles.css


.cloud:before{
    content: '';
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height:100%;
    background: url('../img/clouds.png');
    background-size: cover;
    opacity:0.9;
    animation: cloud-reverse 120s linear infinite;
}

@keyframes cloud-reverse{
    0%{
        background-position: 5440px;
    }

    100%{
          background-position: 0px;
    }

}



이 기법은 wave2과 동일합니다.

반대 방향으로 천천히 애니메이션을 오른쪽에서 왼쪽으로 흘리는 표현 방법입니다.

화면에 한층 더 입체감이 나오고, 패럴랙스의 움직임과 비슷하네요.





배경을 바꾸거나 달을 붙이거나 별을 짓거나

여러가지 표현을 추가하면 더 멋지네요.



오늘은 이상입니다~


CSS animation에서 놀아 버리다 - star -
CSS animation에서 뛰어넘기 - snow -

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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