프런트 엔드 매일 전투 : # 37 비디오 전환 및 애니메이션, 특수 효과 생성 스트로크 버튼의 좋은 타이밍을 파악하는 방법을 보여줍니다

결과 미리보기

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

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

대화 형 비디오 자습서

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

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

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

소스 코드 다운로드

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

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

코드 읽기

DOM 표준 탐색 모드를 정의합니다 :

<nav>
    <ul>
        <li>Home</li>
    </ul>
</nav>

중심 :

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

사용자 정의 텍스트와 버튼 테두리 스타일 :

nav ul {
    padding: 0;
}

nav ul li {
    color: white;
    list-style-type: none;
    font-size: 32px;
    font-family: sans-serif;
    text-transform: uppercase;
    width: 12em;
    height: 4em;
    border: 1px solid rgba(255, 255, 255, 0.2);
    text-align: center;
    line-height: 4em;
    letter-spacing: 0.2em;
}

변수를 사용하므로, 여러 번 사용하기 때문에, 더미 소자 정의 경계 및 우측 경계 테두리 색을 사용 전 :

:root {
    --color: dodgerblue;
}

nav ul li::before {
    content: '';
    position: absolute;;
    width: 0;
    height: 0;
    visibility: hidden;
    top: 0;
    left: 0;
    border-top: 1px solid var(--color);
    border-right: 1px solid var(--color);
}

마찬가지로, 가상 요소 오른쪽 경계 및 하부 경계의 정의를 사용 :

nav ul li::after {
    content: '';
    position: absolute;;
    width: 0;
    height: 0;
    visibility: hidden;
    bottom: 0;
    right: 0;
    border-bottom: 1px solid var(--color);
    border-left: 1px solid var(--color);
}

입학 디자인 프레임 애니메이션 눌러 오른쪽, 아래, 애니메이션 설정 시간 관련 변수의 속도의 조정을 용이하게하기 위해, 표시 프레임의 순서를 남겼

:root {
    --time-slot-length: 0.1s;
    --t1x: var(--time-slot-length);
    --t2x: calc(var(--time-slot-length) * 2);
    --t3x: calc(var(--time-slot-length) * 3);
    --t4x: calc(var(--time-slot-length) * 4);
}

nav ul li:hover::before,
nav ul li:hover::after {
    width: 100%;
    height: 100%;
    visibility: visible;
}

nav ul li:hover::before {
    transition:
        visibility 0s,
        width linear var(--t1x),
        height linear var(--t1x) var(--t1x);
}

nav ul li:hover::after {
    transition: 
        visibility 0s var(--t2x),
        width linear var(--t1x) var(--t2x),
        height linear var(--t1x) var(--t3x);
}

입학의 순서를 반대로, 애니메이션의 경계 모양을 디자인 :

nav ul li::before {
    transition:
        height linear var(--t1x) var(--t2x),
        width linear var(--t1x) var(--t3x),
        visibility 0s var(--t4x);
}

nav ul li::after {
    transition:
        height linear var(--t1x),
        width linear var(--t1x) var(--t1x),
        visibility 0s var(--t2x);
}

행정 동안 버튼 텍스트 색상을 변경하자 :

nav ul li {
    transition: var(--t4x);
}

nav ul li:hover {
    color: var(--color);
}

마지막 행정의 끝에서, 버튼 주위에 동적 강화 펄스 애니메이션을 추가 :

nav ul li:hover {
    animation: pulse ease-out 1s var(--t4x);
}

@keyframes pulse {
    from {
        box-shadow: 0 0 rgba(30, 144, 255, 0.4);
    }

    to {
        box-shadow: 0 0 0 1em rgba(30, 144, 255, 0);
    }
}

우리는 완료!