프런트 엔드 매일 전투 : # 2 비디오는 순수 CSS 만들기와 사각형 로더 특수 효과를 회전하는 방법을 보여줍니다

결과 미리보기

누르면 현재 페이지 미리보기의 오른쪽에있는 버튼을 "미리보기를 클릭"링크 전체 화면 미리보기를 클릭합니다.

https://codepen.io/zhang-ou/pen/vjLQMM

대화 형 비디오 자습서

이 비디오는 상호 작용, 당신은 비디오를 편집, 코드 비디오를 일시 정지 할 수 있습니다.

제발 사용 크롬, 사파리, 가장자리 개방 볼 수 있습니다.

https://scrimba.com/c/cJMkwH9

소스 코드 다운로드

GitHub의에서 다운로드하시기 바랍니다.

https://github.com/comehope/front-end-daily-challenges/tree/master/002-rectangular-rotating-loader-animation

코드 읽기

DOM, 상기 세 개의 용기의 범위를 정의한다 :

<div class="loader">
    <span></span>
    <span></span>
    <span></span>
</div>

중심 :

html, body {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: black;
}

크기의 컨테이너 :

.loader {
    width: 150px;
    height: 150px;
    position: relative;
}

테두리 스타일의 사각형을 설정합니다 :

.loader span {
    position: absolute;
    box-sizing: border-box;
    border: 10px solid dimgray;
    border-radius: 2px;
}

세 직사각형 사이즈 구비 :

.loader span:nth-child(1) {
    width: 100%;
    height: 100%;
}

.loader span:nth-child(2) {
    width: 70%;
    height: 70%;
    margin: 15%;
}

.loader span:nth-child(3) {
    width: 40%;
    height: 40%;
    margin: 30%;
}

왼쪽 상단을 그리기하고 바로 의사 트림 요소 절감 :

.loader span::before,
.loader span::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 50%;
    background-color: gold;
}

.loader span::before {
    top: -10px;
    left: -10px;
}

.loader span::after {
    bottom: -10px;
    right: -10px;
}

사용자 정의 애니메이션 효과 :

@keyframes rotating {
    from {
        transform: rotateY(0deg);
    }

    to {
        transform: rotateY(360deg);
    }
}

애니메이션은 세 개의 사각형에 도포된다 :

.loader span {
    animation: rotating linear infinite;
}

.loader span:nth-child(1) {
    animation-duration: 4s;
}

.loader span:nth-child(2) {
    animation-duration: 2s;
}

.loader span:nth-child(3) {
    animation-duration: 1s;
}

마지막으로, 사각형은 세 스택 순서에 제공된다 :

.loader span:nth-child(1) {
    z-index: 3;
}

.loader span:nth-child(2) {
    z-index: 2;
}

.loader span:nth-child(3) {
    z-index: 1;
}

우리는 완료!

지식 포인트

• @keyframes https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes
• 애니메이션 기간 https://developer.mozilla.org/en-US/docs/Web/CSS/animation-duration
• rotateY https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotateY
• n 번째의 아이 https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
• Z- 색인 https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
• :: 전 https://developer.mozilla.org/en-US/docs/Web/CSS/::before
• :: 후 https://developer.mozilla.org/en-US/docs/Web/CSS/::after