순수 CSS를 사용하여 혼자 걷는 사람의 애니메이션 효과를 구현하는 방법(소스 코드 첨부)

이 기사의 내용은 혼자 걷는 사람의 애니메이션 효과를 얻기 위해 순수한 CSS를 사용하는 방법에 대한 것입니다. (소스 코드 첨부) 도움이 필요한 친구들이 참고할 수 있기를 바랍니다. 당신에게.

효과 미리보기

소스 코드 다운로드

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

코드 해석

dom을 정의하세요. 컨테이너에는 헤더, Body를 나타내는 3가지 요소가 포함되어 있습니다. 및 발:

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

중앙 디스플레이:

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(lightgray 20%, whitesmoke);
}

컨테이너 크기 정의:

.man {
    width: 12em;
    height: 33em;
    font-size: 10px;
    position: relative;
}

기본 색상 정의:

.man {
    color: white;
}

머리 그리기:

.head {
    position: absolute;
    width: 7em;
    height: 7em;
    background-color: currentColor;
    border-radius: 50%;
    right: 0;
}

몸체 그리기:

.body {
    position: absolute;
    width: 6.2em;
    height: 14.4em;
    background-color: currentColor;
    top: 7em;
    border-radius: 100% 20% 0 0;
}

발 그리기, 이제 한쪽 발에만 표시되기 때문입니다. 두 발이 서로 겹쳐집니다. 잠시 움직이면 두 발이 보입니다.

.feet::before,
.feet::after {
    content: '';
    position: absolute;
    width: 4em;
    height: 1.4em;
    background-color: white;
    bottom: 0;
    left: -1.6em;
    border-radius: 1em 80% 0.4em 0.4em;
}

의사 요소를 사용하여 그림자 그리기:

.man::before {
    content: '';
    position: absolute;
    width: 12em;
    height: 0.8em;
    background-color: rgba(0, 0, 0, 0.1);
    bottom: -0.2em;
    left: -3em;
    border-radius: 50%;
}

다음으로 애니메이션 효과를 추가합니다.

걷는 애니메이션 효과 추가 및 두 발의 애니메이션 시간 인터리브:

.feet::before,
.feet::after {
    animation: feet-animation 2s ease-in-out infinite;
}

.feet::after {
    animation-delay: 1s;
}

@keyframes feet-animation {
    20% {
        transform: translateX(3.4em) translateY(-1.6em) rotate(4deg);
    }

    30% {
        transform: translateX(4.6em) translateY(-1em) rotate(0deg);
    }

    40% {
        transform: translateX(5.6em) translateY(-0.6em) rotate(4deg);
    }

    44% {
        transform: translateX(5.6em) translateY(0) rotate(0deg);
    }
}

기복이 심한 머리와 몸의 애니메이션 효과 추가:

.head,
.body {
    animation: body-animation 4s ease-in-out infinite;
}

@keyframes body-animation {
    0%, 100% {
        transform: translateY(0) skewX(-2deg);
    }

    25%, 75% {
        transform: translateY(0.5em) skewX(0deg);
    }

    50% {
        transform: translateY(0) skewX(0deg);
    }
}

몸의 움직임에 따라 그림자 영역이 바뀌는 애니메이션 효과 추가:

.man::before {
    animation: shadow-animate 4s ease-in-out infinite;
}

@keyframes shadow-animate {
    0%, 50%, 100% {
        transform: scale(1);
    }

    25%, 75% {
        transform: scale(1.15);
    }
}

끝났습니다!

관련 권장 사항:

순수한 CSS를 사용하여 종이학을 구현하는 방법(소스 코드 포함)

순수한 CSS를 사용하여 Apple 시스템의 앨범 아이콘을 구현하는 방법(코드)

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