혁신적인 CSS3 애니메이션의 놀라운 10 가지 예
CSS3는 많은 미학적으로 인상적인 새로운 기능을 가져 왔습니다. 아마도 이것들 중 가장 재미있는 것은 CSS 애니메이션 일 것인데, 이는 일반적으로 JavaScript에 위임 된 많은 모션 기반 기능을 수행 할 수있게합니다. 웹에서 CSS 애니메이션을 가장 멋지고, 혁신적이며, 가장 중요하게 사용하는 방법을 알아 보려면 서사적 인 탐구에 참여하십시오. 시작하십시오!
경고 :이 애니메이션은 브라우저마다 다르므로 IE6에서 서핑하는 경우 Saved By The Bell 시청을 중단하고 전화 접속 연결을 끊고 최신 브라우저를 다운로드해야합니다.
회전 폴라로이드
이 튜토리얼에서는 수많은 새로운 CSS3 명령을 사용하여 놀랍도록 애니메이션 된 사진 더미를 만드는 방법을 보여줍니다. 우리는 강력한 출발을 시작했습니다.이기는 이길 수 없을 것입니다.
데모를 보려면 클릭하십시오
매트릭스
흰 토끼를 따라 가라. err 내 말은, 이 멋진 매트릭스 애니메이션을 확인하십시오. 영화에 대해서는 사실이 아니지만 (개별 캐릭터는 변경되지 않음) 그럼에도 불구하고 인상적입니다. 매트릭스가 모든 시간 동안 가장 공상 과학 영화 중 하나 인 것으로 보아 (나는 두 가지 재앙이 아닌 첫 번째 영화에 대해 이야기하고 있습니다), 이 영화는 우리 목록의 맨 위로 이동하여 의심의 여지가 없습니다. 합당한 경쟁자를 찾을 수있을 때까지 잠시 동안
데모를 보려면 클릭하십시오
재미의 트리 피 회전 칼럼
이 미친 애니메이션은 컬러 상자와 텍스트의 회전 행으로 구성된 회전 열이 특징입니다. 전반적인 효과는 시원하고 어렴풋하게 현기증이납니다. 이것은 매트릭스에서 천둥을 훔치기에는 너무 금이 간 것입니다. 챔피언은 남아 있습니다.
팁 : 멀미가 발생할 가능성을 높이려면 애니메이션을 보면서 위아래로 스크롤하고 머리를 앞뒤로 흔들어주십시오 (우리는 책상 전체에 점심을 던져 버린 하드웨어가 손상되지 않습니다).
데모를 보려면 클릭하십시오
DJ 히어로
이 자습서는 CSS3와 jQuery를 결합하여 회전 레코드를 만듭니다. 온 스크린 컨트롤을 사용하여 레코드 속도를 제어하거나 마우스로 레코드를 가져 와서 약간의 흠집이 생길 수 있습니다.
빈티지 나무 배경에 가상 턴테이블? 이것은 꽤 중요한 경쟁자 일 수 있습니다.이 논쟁은 점점 뜨거워지고 있습니다. 계속 클릭하십시오. 당신은 당신이 놀고 싶어 알고있다.
데모를 보려면 클릭하십시오
3D 애니메이션 큐브
화살표 키를 사용하여 3D 큐브의 회전을 제어 할 수 있습니다. 처음에 나는 그것이 절름발이라고 생각했지만 화살표 키를 눌러 그것을 놀라게하고 터보 회전 죽음 모드로 갈 수 있음을 깨달았습니다. Sonic The Hedgehog를 포함한 메가 스타일 포인트.
데모를 보려면 클릭하십시오
로켓 선
MS-Paint가 놀라운 속도로 하늘을 날아 다니는 경이로움을 느끼게 된 로켓은 의심 할 여지가 없습니다. 일종의… 실제로 그것은 일종의 수레이며 점선으로 된 이상한 직사각형의 힘장에 의해 운반됩니다. 애니메이션의 중간 쯤에 로켓은 명백한 이유없이 사라 지므로 클로킹 장치로 무장 한 최고 비밀의 스텔스 로켓이 벌칸 구축함에 침입하는 것을 막을 수 있습니다.
정확히 심각한 경쟁자가 아닙니다. 사실, 왜 이걸 당신에게 보여줬나요? 그리고 훨씬 더 적절한, 벌컨 구축함과 같은 것이 있습니까?
데모를 보려면 클릭하십시오
날씨
눈
이파리
날씨 정보를 한 번에 치워 보자? 치즈 애니메이션이있는 곳에서는 피할 수없는 떨어지는 눈, 잎, 비 등이 있습니다. 잘못 이해하지 마십시오. 이는 매우 시원하며 계절에 따라 웹 사이트가 정말 훌륭하게 수정 될 수 있습니다. 그러나 이러한 특정 실행은 잘 이루어졌지만 상황에 따라 창의적이지는 않습니다. 페이지의 모든 콘텐츠를 파괴하는 거대한 우박이있는 웹 사이트를 만들면 알려주세요.
스노우 데모를 보려면 클릭하십시오
잎 데모를 보려면 클릭하십시오
커버 플로우
이 애니메이션은 위의 DJ Hero 예제와 같은 하이브리드 CSS / jQuery 기술을 사용하여 Apple의 커버 플로우를 모방합니다. 애플을 모방 함으로써이 카테고리는 시원하고 살아남은 카테고리 모두에서 잘 수행되며 혁신적 일도합니다 (이것은 내가 찾을 수있는 유일한 CSS3 Cover Flow 가짜입니다). 우리는 또 다른 경쟁자를 가지고 있습니다.
데모를 보려면 클릭하십시오
스타 워즈 크롤링
그게 다야, 게임 오버. 다른 참가자들에게도 감사의 말을 전하고 싶지만, 이 사람이 상을받습니다. HTML과 CSS에서 크게 울부 짖는 '스타 워즈'의 오프닝 장면입니다. CSS 애니메이션을 더 잘 사용할 수있는 방법은 무엇입니까? 나는 아무것도 없다는 것을 제출한다. 날 믿어 너의 가장 친한 친구에게 이것을 보여 주면 그는 크리스마스 아침에 마술처럼 4 살짜리로 변신 할 것이다.
Epic View 데모를 클릭하십시오
(사파리 + 스노우 레오파드 필요)
결론
이 콘테스트가 준비되었다고 생각하는 사람들에게는 맞습니다. 나는 스타 워즈 예제를 찾은 후에 다른 모든 것들이 비교로 얼마나 창백했는지 강조하기 위해 콘테스트 아이디어를 만들었습니다. 이 기사의 목적은 CSS3에 내장 된 비교적 간단한 애니메이션 기능으로 만들 수있는 멋진 것들에 대한 끝이 없음을 보여주기위한 것입니다.
아래 설명을 사용하여 가장 좋아하는 것을 알려주십시오. 또한 다른 예를 알고 있다면 공유하십시오!
