순수 CSS를 사용하여 상자 던지기 로더를 구현하는 방법(소스 코드 첨부)-CSS 튜토리얼-php.cn

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

不言

풀어 주다： 2018-09-03 17:52:09

원래의

1589명이 탐색했습니다.

이 글의 내용은 순수 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);
    }
}

로그인 후 복사

끝났습니다!