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

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

[추천 튜토리얼: CSS 비디오 튜토리얼]

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

난이도

☆☆☆☆

렌더링

Idea

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

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

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

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

HTML

<span class="shooting-star animation"></span>

분석:

• 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의 값
  • 애니메이션 지속 시간은 유성이 인터페이스를 통과하는 시간을 결정합니다
  • 애니메이션 수는 무제한으로 설정됩니다

지식 포인트

구현할 CSS 삼각형
둥근 모서리 테두리
애니메이션 효과를 추가하는 애니메이션
@keyframes 사용자 정의 애니메이션

Gitbub 소스 코드:

https://github.com/ 난장런/CSS_skills/ blob/master/shooting_star/shooting_star.html

더 많은 프로그래밍 관련 지식을 보려면

프로그래밍 소개

를 방문하세요! !

위 내용은 CSS3로 유성우 효과를 얻는 방법은 무엇입니까? (코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!