CSS를 사용하여 탁구 격투 애니메이션 구현

이번에는 CSS를 사용하여 탁구 격투 애니메이션을 구현하는 방법을 소개하겠습니다. CSS를 사용하여 탁구 격투 애니메이션을 구현하는 주의 사항은 다음과 같습니다.

코드 해석

돔 정의, 컨테이너에는 왼쪽 라켓, 작은 공 및 오른쪽 라켓이 포함됩니다.

<p class="court">
    <p class="left-paddle"></p>
    <p class="ball"></p>
    <p class="right-paddle"></p>
</p>

중앙 디스플레이:

body {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(silver, dimgray);
}

조정 박스 모델:

* {
    box-sizing: border-box;
}

공 케이스 그리기:

.court {
    width: 20em;
    height: 20em;
    color: white;
    border: 1em solid currentColor;
}

왼쪽 그리기 슛:

.court {
    position: relative;
}
.left-paddle
    width: 1em;
    height: calc(50% - 1em);
    background-color: currentColor;
    position: absolute;
    top: 1em;
    left: 1em;
}

왼쪽 라켓을 움직이게 합니다:

.left-paddle {
    animation: left-moving 1s linear infinite alternate;
}
@keyframes left-moving {
    to {
        transform: translateY(100%);
    }
}

마찬가지로 오른쪽 라켓을 그립니다:

.right-paddle
    width: 1em;
    height: calc(50% - 1em);
    background-color: currentColor;
    position: absolute;
    top: 1em;
    left: 1em;
    bottom: 1em;
    right: 1em;
}

마찬가지로 오른쪽 라켓을 그립니다:

.right-paddle {
    animation: right-moving 1s linear infinite alternate;
}
@keyframes right-moving {
    to {
        transform: translateY(-100%);
    }
}

공을 그립니다:

.ball {
    width: 100%;
    height: 1em;
    border-left: 1em solid currentColor;
    position: absolute;
    left: 2em;
    top: calc(50% - 1.5em);
}

공을 움직입니다:

.ball {
    animation: bounce 1s linear infinite alternate;
}
@keyframes bounce {
    to {
        left: calc(100% - 3em);
    }
}

마지막으로 , 왼쪽 및 오른쪽 촬영 코드를 리팩터링하고 공통 속성을 병합합니다.

.left-paddle,
.right-paddle {
    width: 1em;
    height: calc(50% - 1em);
    background-color: currentColor;
    position: absolute;
    animation: 1s linear infinite alternate;
}
.left-paddle {
    top: 1em;
    left: 1em;
    animation-name: left-moving;
}
.right-paddle {
    bottom: 1em;
    right: 1em;
    animation-name: right-moving;
}

완료되었습니다!

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

Chart.js 경량 차트 라이브러리 사용 사례 분석

Node.js의 https 사용 사례 분석

위 내용은 CSS를 사용하여 탁구 격투 애니메이션 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!