순수 CSS를 사용하여 깃발을 흔드는 애니메이션 효과를 얻는 방법(소스 코드 첨부)

이 글의 내용은 순수한 CSS를 사용하여 깃발을 흔드는 애니메이션 효과를 얻는 방법에 관한 것입니다(소스 코드 첨부). 도움이 필요한 친구들이 참고할 수 있기를 바랍니다. .

효과 미리보기

소스 코드 다운로드

https://github.com/comehope/front-end-daily-challenges

코드 해석

dom 정의, 컨테이너에는 15개 요소가 포함됩니다.

<div>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

중앙 디스플레이:

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: black;
}

컨테이너 크기 정의:

.flag {
    width: 10em;
    height: 15em;
    font-size: 20px;
}

선 스타일 설정:

.flag span {
    width: 0.25em;
    height: inherit;
    background-color: deepskyblue;
}

선 타일 만들기:

.flag {
    display: flex;
    justify-content: space-between;
}

3D 원근 효과 추가:

.flag {
    transform: perspective(500px) rotateY(-20deg);
}

왼쪽 및 오른쪽 이동 애니메이션 효과 정의:

.flag span {
    animation: wave 1.5s ease-in-out infinite alternate;
}

@keyframes wave {
    to {
        transform: translateX(2em);
    }
}

요소 설정 변수 값:

.flag span:nth-child(1) {
    --n: 1;
}

.flag span:nth-child(2) {
    --n: 2;
}

/* 共 15 个元素，每元素的 --n 变量值等于它的序号。 */
/* 中间代码略 …… */

.flag span:nth-child(14) {
    --n: 14;
}

.flag span:nth-child(15) {
    --n: 15;
}

깃발이 날아다니는 효과를 만들기 위해 각 줄의 애니메이션이 지연되어 시작되도록 합니다.

.flag span {
    animation-delay: calc(var(--n) * -0.1s);
}

마지막으로 빛과 그림자 효과를 추가합니다.

.flag span {
    background-color: ghostwhite;
}

@keyframes wave {
    to {
        transform: translateX(2em);
        background-color: deepskyblue;
    }
}

끝났습니다!

관련 권장 사항:

공이 직사각형 배경으로 바뀌는 버튼 호버 효과를 얻기 위해 순수 CSS를 사용하는 방법(소스 코드 첨부)

CSS와 D3를 사용하여 작은 물고기 수영의 대화형 애니메이션을 구현하는 방법 (코드 첨부)

위 내용은 순수 CSS를 사용하여 깃발을 흔드는 애니메이션 효과를 얻는 방법(소스 코드 첨부)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!