순수한 CSS를 사용하여 체스판 애니메이션의 환상을 구현하는 방법(소스 코드 첨부)

이 글의 내용은 체스판의 환상 애니메이션을 구현하기 위해 순수 CSS를 사용하는 방법에 관한 것입니다. (소스 코드 첨부) 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

효과 미리보기

소스 코드 다운로드

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

코드 해석

dom을 정의하세요. 컨테이너에는 10개의 하위 요소가 포함되어 있습니다. 각각 하위 요소는 행을 나타냅니다.

<div>
    <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;
}

컨테이너 크기를 vmin 단위로 정의하고 하위 요소를 수직으로 정렬합니다.

.container {
    width: 100vmin;
    height: 100vmin;
    display: flex;
    flex-direction: column;
}

하위 요소의 배경 패턴을 간격이 있는 흑백으로 설정합니다. 상단에 가는 선이 있는 블록 라인:

.container span {
    width: inherit;
    height: 10vmin;
    background: 
        linear-gradient(
            gray, gray 0.5vmin,
            transparent 0.5vmin, transparent
        ),
        repeating-linear-gradient(
            to right,
            black, black 10vmin,
            transparent 10vmin, transparent 20vmin
        )
}

컨테이너 하단에 가는 선 추가:

.container {
    border-bottom: 0.5vmin solid gray;
}

홀수 행의 배경을 컬러 블록의 절반만큼 오른쪽으로 이동하는 애니메이션 효과 추가 .옮긴 후에는 홀수 행은 오른쪽이 넓고 왼쪽이 좁은 것처럼 보이고, 짝수 행은 왼쪽이 넓고 오른쪽이 좁은 것처럼 보입니다. 이것은 환상입니다:

.container span:nth-child(odd) {
    animation: move 5s linear infinite;
}

@keyframes move {
    0%, 55%, 100% {
        background-position: 0 0;
    }

    5%, 50% {
        background-position: 5vmin 0;
    }
}

Let 짝수 행의 배경도 이동하여 반대 방향의 환상을 만듭니다.

.container span:nth-child(even) {
    animation: move 5s linear infinite reverse;
}

끝났습니다!

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