프런트 엔드 매일 전투 : # 91 영상은 여행의 기차 로더 순수 CSS 생성을 사용하는 방법을 보여줍니다

결과 미리보기

를 눌러 전체 화면 미리보기의 링크를 클릭, 현재 페이지를 미리 볼 수있는 권리 "미리보기를 클릭"버튼을 누릅니다.

https://codepen.io/comehope/pen/RBLWzJ

대화 형 비디오

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

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

https://scrimba.com/p/pEgDAM/cawN3f9

소스 코드 다운로드

매일 프런트 엔드 전투 시리즈 전체 소스 코드는 GitHub의에서 다운로드 할 수 있습니다 :

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

코드 읽기

정의 DOM, 두 요소에있어서, 용기 train열차의 대표 track세 포함 트랙 대신 <span>세 침목 대표.

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

중심 :

body{
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(#666, #333);
}

정의 된 컨테이너의 크기입니다 :

.loader {
    width: 8em;
    height: 10em;
    font-size: 20px;
}

먼저 기차를 그립니다.
기차의 윤곽을 그리기 :

.train {
    width: 6em;
    height: 6em;
    color: #444;
    background: #bbb4ab;
    border-radius: 1em;
    position: relative;
    left: 1em;
}

과 창을 그리기 :: 의사 요소 앞에 :

.train::before {
    content: '';
    position: absolute;
    width: 80%;
    height: 2.3em;
    background-color: currentColor;
    border-radius: 0.4em;
    top: 1.2em;
    left: 10%;
}

:: 의사 요소 후 다음 창에서 빛을 그릴 :

.train::after {
    content: '';
    position: absolute;
    width: 25%;
    height: 0.4em;
    background-color: currentColor;
    border-radius: 0.3em;
    top: 0.4em;
    left: calc((100% - 25%) / 2);
}

방사형 그라데이션 램프 그린 :

.train {
    background: 
        radial-gradient(circle at 20% 80%, currentColor 0.6em, transparent 0.6em),
        radial-gradient(circle at 80% 80%, currentColor 0.6em, transparent 0.6em),
        #bbb;
}

다음 그림은 레일 및 침목.
기차보다 약간 넓은 트랙의 폭을 정의합니다 :

.track {
    width: 8em;
}

가상 요소 이끌려 트랙 :

.track {
    position: relative;
}

.track::before,
.track::after {
    content: '';
    position: absolute;
    width: 0.3em;
    height: 4em;
    background-color: #bbb;
    border-radius: 0.4em;
}

레일 양쪽에 배치되고, 훨씬 작은 시각적 효과 부근에 형성된다 :

.track::before,
.track::after {
    transform-origin: bottom;
}

.track::before {
    left: 0;
    transform: skewX(-27deg);
}

.track::after {
    right: 0;
    transform: skewX(27deg);
}

시청자 효과 사이의 최근 접 거리가 어느 침목 그리기, 현재 세 침목 함께 오버랩 :

.track span {
    width: inherit;
    height: 0.3em;
    background-color: #bbb;
    position: absolute;
    top: 4em;
}

애니메이션 트랙 :

.track span {
    animation: track-animate 1s linear infinite;
}

@keyframes track-animate {
    0% {
        transform: translateY(-0.5em) scaleX(0.9);
        filter: opacity(0);
    }

    10%, 90% {
        filter: opacity(1);
    }

    100% {
        transform: translateY(-4em) scaleX(0.5);
        filter: opacity(0);
    }
}

또 다른 두 개의 침목의 애니메이션 지연을 위해, 그래서 트랙이 방법을 완료 가서 영원히 같이 있음 :

.track span:nth-child(2) {
    animation-delay: -0.33s;
}

.track span:nth-child(3) {
    animation-delay: -0.66s;
}

마지막으로, 모션에서 약간 흔들림과 같은 기차 애니메이션 모습을 증가 :

.train {
    animation: train-animate 1.5s infinite ease-in-out;
}

@keyframes train-animate {
    0%, 100% {
        transform: rotate(0deg);
    }

    25%, 75% {
        transform: rotate(0.5deg);
    }

    50% {
        transform: rotate(-0.5deg);
    }
}

우리는 완료!