순수 CSS를 사용하여 동적 열차를 구현하는 방법-CSS 튜토리얼-php.cn

순수 CSS를 사용하여 동적 열차를 구현하는 방법

不言

풀어 주다： 2018-07-27 10:43:51

원래의

2375명이 탐색했습니다.

이 기사에서는 순수한 CSS를 사용하여 움직이는 기차를 구현하는 방법을 소개합니다. 도움이 필요한 친구들에게 도움이 되기를 바랍니다.

효과 미리보기

순수 CSS를 사용하여 동적 열차를 구현하는 방법

코드 해석

돔을 정의하세요. 컨테이너에는 2개의 요소가 포함되어 있고, train 代表火车，track 代表铁轨，其中包含的 3 个 <span></span>는 3개의 침목을 나타냅니다.

<p>
    </p><p></p>
    <p>
        <span></span>
        <span></span>
        <span></span>
    </p>

로그인 후 복사

중앙:

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;
}

로그인 후 복사

창을 그리기 위해 ::before 의사 요소 사용:

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

로그인 후 복사

:after 의사 요소를 사용하여 창문에 신호등 그리기:

.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);
}

로그인 후 복사

방사형 그래디언트를 사용하여 자동차 그리기 light :

.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);
}

로그인 후 복사

그리기 침목, 이것은 관찰자에게 가장 가까운 효과입니다. 현재 침목 3개가 겹쳐 있습니다.

.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);
    }
}

로그인 후 복사

다른 침목 2개에 대한 애니메이션 지연을 설정하여 철로를 만듭니다. 절대 끝나지 않을 것 같은 모습:

.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);
    }
}

로그인 후 복사

끝났습니다!