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

11187 단어 CSSanimation
CSS animation day6이 되었습니다.

오늘은 밤하늘에 떠있는 별을 표현하고 싶습니다.

1. 완성판





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


2. 왜?　





background image 에 사용하면 좋네요, 마음이 진정됩니다.



3. 참고문헌



htps //w w. 요츠베. 이 m/와 tch? v = 아 ywz 9cf-u

htps : // 빠스테병. 코 m / 게 fdRwgc



4. 분해해 본다



❶.

그럼 가자.

우선 배경을 만듭니다.




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>
</body>
</html>




styles.css

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





❷.

별을 만듭니다.

여기 에서 별의 box-shadow를 복사합니다. 길다






styles.css


#stars {
    width: 1px;
    height: 1px;
    background: transparent;
    animation: star 50s linear infinite;
    box-shadow: //ここに、コピペしたやつを貼り付ける  
}



이렇게 됩니다.





❸.

stars:after에서도 마찬가지입니다.




styles.css

#stars:after{
    content: '';
    position: absolute;
    top: 2000px;
    width: 1px;
    height: 1px;
    background: transparent;
    box-shadow: //ここにコピペする。
}



❹.

stars2, stars2:after, stars3, stars3:after 에도 같은 일을 한다.




styles.css

#stars2{
    width: 2px;
    height: 2px;
    background: transparent;
    animation: star 100s linear infinite;
    box-shadow: //ここにコピペする。
}


#stars2:after{
    content: '';
    position: absolute;
    top: 2000px;
    width: 2px;
    height: 2px;
    background: transparent;
　　　　　　　　box-shadow: //ここにコピペする。


#stars3 {
    width: 3px;
    height: 3px;
    background: transparent;
    animation: star 150s linear infinite;
    box-shadow: //ここにコピペする。
}

#stars3:after{
    content: '';
    top: 2000px;
    width: 3px;
    height: 3px;
    background: transparent;
　　　　　　　　box-shadow: //ここにコピペする。

}



크고 작은 다양한 아름다운 밤하늘이 생겼습니다.





❺.



마지막으로, 애니메이션으로 움직이자.

비 과 같은 translateY 를 사용합니다.




styles.css


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



완성!





별의 소재를 거의 복사하고 keyframe으로 위아래로 움직였지만,

이런 깨끗한 표현이 가능합니다.



그럼 또 내일!


CSS animation에서 놀아 넘어뜨리는 - rain -
CSS animation으로 뛰어넘기다 - cloud -

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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