순수 CSS를 사용하여 상자 던지기 로더를 구현하는 방법(소스 코드 첨부)

이 글의 내용은 순수 CSS를 사용하여 상자 던지기 로더를 구현하는 방법에 대한 것입니다(소스 코드 첨부). 필요한 친구들이 참고하면 도움이 될 것입니다. 너.

효과 미리보기

소스코드 다운로드

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

코드 해석

dom 정의, 요소 1개만:

<div></div>

중앙 디스플레이:

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

나무 띠 그리기:

.loader {
    width: 6em;
    border-bottom: 0.25em solid white;
    font-size: 30px;
    border-radius: 0.125em;
}

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

.loader {
    position: relative;
}

.loader::before {
    content: '';
    position: absolute;
    width: 1em;
    height: 1em;
    border: 0.25em solid white;
    bottom: 0;
    left: 0.5em;
    border-radius: 0.25em;
}

패턴을 기울여 경사면에 상자를 형성하게 합니다. 효과:

.loader {
    transform: rotate(-45deg);
    left: 1em;
    top: 1em;
}

다음으로 애니메이션을 만듭니다. #… 🎜🎜#

.loader::before {
    animation: push 3s infinite;
}

@keyframes push {
    0% {
        transform: translateX(0);
    }
    
    20%, 25% {
        transform: translateX(1em);
    }

    40%, 45% {
        transform: translateX(2em);
    }

    60%, 65% {
        transform: translateX(3em);
    }

    80% {
        transform: translateX(0);
    }
}

# + 상단에 접근 시 드롭 효과:

@keyframes push {
    0% {
        transform: translateX(0) rotate(0deg);
    }
    
    20%, 25% {
        transform: translateX(1em) rotate(calc(90deg * 1));
    }

    40%, 45% {
        transform: translateX(2em) rotate(calc(90deg * 2));
    }

    60%, 65% {
        transform: translateX(3em) rotate(calc(90deg * 3));
    }

    80% {
        transform: translateX(0) rotate(0deg);
    }
}

마지막으로 페이지를 넘을 수 있는 부분 숨기기:

@keyframes push {
    0% {
        transform: translateX(0) rotate(0deg);
    }

    5% {
        transform: translateX(0) rotate(-5deg);
    }
    
    20%, 25% {
        transform: translateX(1em) rotate(calc(90deg * 1 + 5deg));
    }

    30% {
        transform: translateX(1em) rotate(calc(90deg * 1 - 5deg));
    }

    40%, 45% {
        transform: translateX(2em) rotate(calc(90deg * 2 + 5deg));
    }

    50% {
        transform: translateX(2em) rotate(calc(90deg * 2 - 5deg));
    }

    60%, 65% {
        transform: translateX(3em) rotate(calc(90deg * 3 + 5deg));
    }

    70% {
        transform: translateX(3em) rotate(calc(90deg * 3 - 5deg));
    }

    80% {
        transform: translateX(0) rotate(-5deg);
    }
}

끝났습니다!

관련 추천:

순수한 CSS를 사용하여 혼자 걷는 사람의 애니메이션 효과를 얻는 방법(소스 코드 포함) #🎜🎜 ##🎜🎜 #

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

#🎜 🎜#

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