CSS3로 떨어지는 눈송이 효과를 얻는 방법
- 清浅원래의
- 2018-12-05 14:52:246196검색
CSS3의 애니메이션 속성을 사용하여 애니메이션 이름, 애니메이션 시간, 속도 및 애니메이션 반복 여부를 설정하여 눈송이가 떨어지는 효과를 얻습니다.
오늘 제가 공유할 내용은 CSS3의 애니메이션 속성을 사용하여 다음을 수행하는 것입니다. 눈송이가 떨어지는 효과를 얻으세요. 이 효과에는 특정 참조 효과가 있으므로 모든 사람에게 도움이 되기를 바랍니다.
【추천 코스: CSS3 튜토리얼】
배경 이미지 만들기
컴퓨터에 있는 그리기 소프트웨어를 사용하여 작은 별과 같이 그리고 싶은 패턴을 그릴 수 있습니다. 그리고 눈송이, 사랑 등등. 이 예에서는 캔버스에 검정색 배경을 그린 다음 눈송이를 그립니다
프로그램 아이디어:
먼저 그림의 배경색과 동일한 색상을 몸체에 추가한 다음 절대값을 생성합니다. 위치를 통한 위치 지정: 고정 요소, 브라우저 창을 기준으로 위치를 지정한 다음 그림이 서로 밀접하게 맞도록 위쪽, 아래쪽, 왼쪽 및 오른쪽 값을 0으로 설정하고 마지막으로 애니메이션 속성을 사용합니다. 애니메이션 효과를 설정하려면
원하는 대로 애니메이션 효과를 설정할 수 있습니다. 예를 들어 이 예에서는
애니메이션 이름을 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('images/xuehua.png');
-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로 떨어지는 눈송이 효과를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!