> 웹 프론트엔드 > HTML 튜토리얼 > 스톱모션 애니메이션

스톱모션 애니메이션

WBOY
풀어 주다: 2016-09-01 00:01:02
원래의
1671명이 탐색했습니다.

스톱모션 애니메이션

마우스로 그를 터치하면 움직일 수 없습니다! !

스톱모션 애니메이션으로 키프레임만 재생됩니다. 예전의 옛날 영화들처럼 필름이 한 장밖에 안 나오고, 그러다가 필름에 빛이 비치고 필름이 움직이면서 애니메이션 같은 느낌이 나오죠.

레이아웃이 왜 이렇게 못생겼는지 묻지 마세요

사용된 키워드는 steps()와 sprite입니다

예:
<span style="color: #800000;">element{<br>  background: url() no-repeat; //the-source-of-picture<br>  animation: spirit-animation 4s steps(9);<br>}<br>@keyframes{<br>  from{<br>    background-position: ;//the-start-of-picture<br>  }<br>  to{<br>    background-position: ;//the-end-of-picture<br>  }<br>}</span>
로그인 후 복사

이 애니메이션은 첫 번째 키프레임과 다음 9개의 키프레임을 4초 안에 재생합니다.

키 프레임에 대해 이야기해 보겠습니다. League of Legends(LOL)를 플레이할 때 컴퓨터 그래픽 카드 구성이 최신 버전이 아닐 때 빌어먹을 슬라이드쇼가 표시된다고 불평할 수 있습니다. 각 슬라이드는 키 프레임입니다. 일정 시간 내에 숫자가 충분히 커지면 슬라이드쇼라는 느낌이 들지 않습니다. 빔, 당신은 그것을 느끼지 못할 것입니다) 갇혀서 멈췄습니다).

우리가 일반적으로 사용하는 애니메이션은 애니메이션 트위닝이 기본으로 설정되어 있습니다.

트윈 애니메이션이란 무엇일까요? 명사 전문가들한테 하소연해야 하는데 전혀 못 고르는 약어가 많아요.

트윈 애니메이션, 영어 트윈 애니메이션, 도형 애니메이션은 이전 사진에서 다음 사진으로 부드럽게 전환되며, 그 동안 언제든지 사진을 캡처할 수 있습니다. 그는 자신이 설정한 사진이 너무 많아서 키 프레임으로는 할 수 없습니다.

엘프는 어떻습니까?

객체에 대한 작업 모음입니다.

그게 다입니다.
관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿