CSS3로 떨어지는 눈송이 효과를 얻는 방법-CSS 튜토리얼-php.cn

CSS3로 떨어지는 눈송이 효과를 얻는 방법

清浅

풀어 주다： 2018-12-12 09:04:14

원래의

6128명이 탐색했습니다.

CSS3의 애니메이션 속성을 사용하여 애니메이션 이름, 애니메이션 시간, 속도 및 애니메이션 반복 여부를 설정하여 눈송이가 떨어지는 효과를 얻습니다.

오늘 제가 공유할 내용은 CSS3의 애니메이션 속성을 사용하여 다음을 수행하는 것입니다. 눈송이가 떨어지는 효과를 얻으세요. 이 효과에는 특정 참조 효과가 있으므로 모든 사람에게 도움이 되기를 바랍니다.

【추천 코스: CSS3 튜토리얼】

배경 이미지 만들기

컴퓨터에 있는 그리기 소프트웨어를 사용하여 작은 별과 같이 그리고 싶은 패턴을 그릴 수 있습니다. 그리고 눈송이, 사랑 등등. 이 예에서는 캔버스에 검정색 배경을 그린 다음 눈송이를 그립니다

CSS3로 떨어지는 눈송이 효과를 얻는 방법

프로그램 아이디어:

먼저 그림의 배경색과 동일한 색상을 몸체에 추가한 다음 절대값을 생성합니다. 위치를 통한 위치 지정: 고정 요소, 브라우저 창을 기준으로 위치를 지정한 다음 그림이 서로 밀접하게 맞도록 위쪽, 아래쪽, 왼쪽 및 오른쪽 값을 0으로 설정하고 마지막으로 애니메이션 속성을 사용합니다. 애니메이션 효과를 설정하려면

CSS3로 떨어지는 눈송이 효과를 얻는 방법

원하는 대로 애니메이션 효과를 설정할 수 있습니다. 예를 들어 이 예에서는

애니메이션 이름을 xuehua로 설정하고 애니메이션 완료 시간을 15초로 설정합니다. 애니메이션 속도는 처음부터 끝까지 동일하며 애니메이션은 무선 루프로 재생됩니다

animation: xuehua 15s linear infinite;

로그인 후 복사

프로그램 코드

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style>
        body{
            background: #000;
        }
        #xuehua{
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0; 
            background: url(&#39;images/xuehua.png&#39;);
            -webkit-animation: xuehua15s linear infinite;
            animation: snow 15s linear infinite;

        }
        @keyframes xuehua{
        0% {
            background-position: 0 0, 0 0;
        }
        100% {
            background-position: 500px 1000px, 500px 500px;
            }
        }
        @-webkit-keyframes xuehua{
            0% {
                background-position: 0 0, 0 0;
            }
            100% {
                background-position: 500px 1000px, 500px 500px;
            }
        }
    </style>
</head>
<body>
    <div id="xuehua"></div>
</body>
</html>

로그인 후 복사

렌더링은 다음과 같습니다.

CSS3로 떨어지는 눈송이 효과를 얻는 방법