CSS3로 유성우 효과를 얻는 방법은 무엇입니까? (코드 예)-CSS 튜토리얼-php.cn

이 글에서는 CSS3를 사용하여 유성우 효과를 구현하는 방법을 코드 예제를 통해 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

CSS3로 유성우 효과를 얻는 방법은 무엇입니까? (코드 예)

참고:주요 텍스트에서는 단일 유성우 구현에 대해서만 설명합니다. 여러 효과는 단일 유성우의 시작점과 너비만 약간 수정하면 됩니다. 애니메이션의 구체적인 예는 기사 마지막에 있는 github 주소를 참조하세요.

난이도

☆☆☆☆

렌더링

CSS3로 유성우 효과를 얻는 방법은 무엇입니까? (코드 예)

Idea

유성우 구현은 세 부분으로 나뉩니다.

(1) 테두리 속성 사용 구현하기 위해 직각 삼각형. 삼각형 구현은CSS를 사용하여 삼각형을 그릴 수 있습니다

(2) 직각 삼각형에 원형 효과를 추가하고 직각 도형의 가장자리를 약화시킵니다

(3) 애니메이션 효과를 추가하여 삼각형을 만들 수 있습니다. 직각 삼각형 이동

HTML

로그인 후 복사

분석:

html 애니메이션 컨테이너만 추가하세요.

CSS

.shooting-star { margin: 30px; display: block; width: 0; border-radius: 2px; border-top-width: 1px; border-top-style: solid; border-top-color: transparent; border-left-width: 230px; border-left-style: solid; border-left-color: white; border-right-width: 230px; border-right-style: solid; border-right-color: transparent; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: white; } .animation { animation: fly 3s infinite; } @keyframes fly { from { margin-left: 900px; border-left-width: 130px; border-right-width: 130px; } to { margin-left: -900px; border-left-width: 360px; border-right-width: 360px; } }

로그인 후 복사

분석:

직각 삼각형
- 직각 삼각형을 구현하려면 먼저 방향을 결정하세요. 이 경우 직각 방향이 왼쪽 하단이 되므로 왼쪽 테두리와 아래쪽 테두리를 색상으로 설정하고 오른쪽 테두리와 위쪽 테두리를 투명하게 설정합니다. 선의 모양이므로 직각 삼각형의 높이는 작고 너비는 큽니다. 따라서 여기서 설정한 왼쪽 및 오른쪽 테두리 너비 값은 매우 크고, 위쪽 및 아래쪽 테두리 너비 값은 매우 작습니다.
- span과 마찬가지로 표시 기본 속성 값이 block이 아닌 요소도 설정해야 합니다. block
원형 효과
의 표시 속성은 border-radius를 통해 원형 테두리를 설정할 수 있으며, border-radius의 값은 직각 삼각형의 높이와 같을 수 있습니다(높이 값은 border-top-width 및 border-bottom-width 값의 합)
애니메이션 효과
통과 margin-left 애니메이션의 초기 위치와 끝 위치를 설정
- 유성의 길이를 변경하여 효과를 구현합니다. border-*-width의 값
- 애니메이션 지속 시간은 유성이 인터페이스를 통과하는 시간을 결정합니다
- 애니메이션 수는 무제한으로 설정됩니다