연말까지 매일 웹 사이트 제작 대학생 ~ 26일째 CSS 애니메이션~

8081 단어 CSS

입문


안녕하세요.요즘 주말에 온천 @70days_js!
오늘은 CSS 애니메이션으로 웹 사이트를 만들었습니다.
처리 기술 수준은 낮지만 같은 고민을 하는 초보자에게 용기를 줄 수 있다면 좋겠다.
오늘이 26일째다.(2019/11/13)
잘 부탁드립니다.

사이트 URL


한 일


나는 CSS 애니메이션으로 사이트를 만들었다.
일단 gif↓로 해주세요.

어제에 이어 또 텐트에 묵었다.(물론 유연함)
그러면 CSS 애니메이션은 @keyframes와 3가지 속성(animation,transition,transform)을 사용하여 실현할 수 있다.속성의 특성을 대충 봅시다.
  • animation・・애니메이션식 동작(편도운동)
  • transition···animation의 하위교환(왕복운동, 그래서 호버와 함께 잘 보인다)
  • transform... 변형(이동, 회전, 확대)
    • 이런 느낌이지만 아직 본질을 잡지 못했기 때문에 잠시 포착했습니다.W3C는 어떤 의도로 세 가지 속성을 준비했을까요?
    참고로transform 속성은 어제의 텍스트 on 이미지입니다.position:absolute의 텍스트를 중앙에 설정하는 데 사용됩니다.이것
    transform: translateY(-50%) translateX(-50%);
    그럼 다음은 설치를 소개해 드리겠습니다.
    기본적으로 @keyframes에서 애니메이션의 흐름을 설명하고 세 가지 속성에서 요소와 실행 시간을 지정한다.(이번에 사용한 것은 애니메이션 속성)
    예를 들어gif에 실린 것은 처음에 흰색의 사각이 나타나고 화면이 4부분으로 분할된 곳@keyframes은 이렇다↓
    @keyframes test {
    0% {
        background-color: black;
        width: 10px;
        height: 10px;
    }
    50% {
        background-color: rgba(255, 255, 255, .8);
        width: 50vw;
        height: 20vh;
    }
    100% {
        background-color: rgba(255, 255, 255, 1);
        width: 50vw;
        height: 50vh;
    }
}
    @keyframes 이후 애니메이션의 이름을 지정할 수 있습니다.이번엔 테스트야.
    여기서 0~100%의 애니메이션 동작을 정의할 수 있습니다.
    요소를 지정하고 애니메이션을 적용하는 방법도 간단합니다.↓
    
<body>
    <div class="test"></div>
    <div class="test2"></div>
    <div class="test3"></div>
    <div class="test4"></div>
    <div class="test5"></div>
    <div class="test6">
        <img class="background_image" src="day24_image/photo4.jpg" alt="テントの画像">
        <h2 class="text_on_image">テント泊</h2>
    </div>
    예를 들어class="test"에 애니메이션test를 적용하려면 이렇게 쓰십시오↓
    .test {
    position: absolute;
    bottom: 0;
    right: 0;
    animation-name: test;
    animation-duration: 5s;
    animation-delay: 1.5s;
    animation-fill-mode: forwards;
}
    animation-name: test;
    이 속성은 이름test를 사용하는 @keyframes 을 나타냅니다.
    duration은 애니메이션의 시간이다.0%에서 100%까지의 시간을 설명합니다.
    delay는 애니메이션을 지연시킬 수 있습니다.위의 글쓰기라면 1.5초 늦게 움직일 것이다.
    마지막으로 중요한 것은 애니메이션-fill-mode:forwards;그러나 이것은 애니메이션이 끝난 후 @keyframes 에 정의된 100% 상태를 유지한다는 것을 나타낸다.만약 이것이 없다면 애니메이션 이전의 상태로 돌아갈 것이다.
    이번 물건은 아마 이것을 되풀이해서 만든 것이다.관심이 있으면 사이트에서github로 가서 원본 코드를 보십시오.

    감상


    애니메이션으로 즐거웠어요.css는 많은 일을 할 수 있다는 인상을 주는데 그 중에서 애니메이션의 공헌이 상당히 크겠죠.
    JavaScript와 조합하면 거의 모든 것을 할 수 있습니다.
    끝까지 읽어주셔서 감사합니다.내일도 투고할 테니 잘 부탁드립니다.

    참고 자료

  • 마우스 호버 시 CSS3transition과 animation의 차이https://q-az.net/mouse-hover-transition-or-animation/
  • [CSS3]@keyframes와 애니메이션 관련 요약 - Qiitahttps://qiita.com/7968/items/1d999354e00db53bcbd8
    • 많이 배웠어요.정말 감사합니다.
    EC-CUBE4 설계 사용자 정의(간단한 설명)
    세로 CSS "writing-mode"가 테이블 탭에서 잘못되었을 때

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage