CSS3 đã mang lại một số tính năng mới rất tuyệt vời. Và thú vị nhất là làm việc với CSS animation. Đây là một bộ sưu tập của 50 CSS3 animation sẽ cho phép bạn thực hiện nhiều hàm motion của JavaScript. Để xem được hiệu ứng này, bạn được yêu cầu phải có các WebKit browser như Safari và Chrome ( rất tiếc cho ai vẫn còn đang sử dụng Internet Explorer ).
Mình đã sử dụng một trong những animation này để áp dụng vào trang profile mới của mình, kết quả là superman bay lòng vòng hoài không ngừng nghỉ :D
CSS3 Clock With jQuery
Sử dụng những tính năng cơ bản của CSS3 Transform: rotate. Và kết hợp với các JavaScript framework như jQuery để làm một chiếc đồng hồ CSS3 đẹp mắt.
Analogue Clock
Chiếc đồng hồ kim này được tạo ra bằng cách sử dụng CSS transition và transform của WebKit. JavaScript chỉ được sử dụng để lấy thời gian hiện tại.
3D Cube That Rotates Using Arrow Keys
Bạn có thể sử dụng phím up, down, left và right để điều hướng khối lập phương 3D. Khối lập phương 3D được xây dựng bằng cách sử dụng -webkit-perspective, -webkit-transform và -webkit-transition.
Multiple 3D Cubes (Slide In/Out)
Nhiều khối lập phương 3D sử dụng CSS3 và các thuộc tính ‘transform’ và ‘transition’. Mình nghĩ nó rất tuyệt, bạn có thể thấy được văn bản trên đối tượng 3D này.
CSS3 Accordion
Hiệu ứng accordion ( kiểu collapse ) sử dụng chỉ với CSS. Animation này chỉ hoạt động với các browser hỗ trợ WebKit.
Auto-Scrolling Parallax
Auto-Scrolling Paralax là một hiệu ứng parallax sử dụng thuộc tính CSS transition của WebKit và không cần JavaScript.
Isocube
Isocube cũng giống như 3D Cube nhưng có chút xíu khác biệt. Isocube có thể load hình ảnh trên một mặt.
Image Gallery
Matrix
Ma Trận ( Matrix ) là một trong những bộ phim viễn tưởng hay nhất mọi thời đại. CSS3 có khả năng làm ra một hiệu ứng tuyệt vời như trong phim.
7 Javascript-effect Alternatives Using CSS3
7 ví dụ về sự thay thế JavaScript bằng cách sử dụng CSS3. Các hiệu ứng khác như Fade Block, Block Pulsate, Nudge, Expand Block, Block Bounce, Spin Block và Accordion.
Image Hover Effects
Các hiệu ứng Hover trên ảnh là một ví dụ của việc sử dụng CSS để thay thế JavaScript. Hình ảnh sẽ thu nhỏ khi bạn đặt con trỏ chuột lên trên hình.
Turning Coke Can (Control With Scrollbar)
3D Meninas
Polaroid Gallery
Polaroid Gallery là một đống hình ảnh sử dụng các lệnh CSS3 mới. Điều tuyệt vời là khi di chuyển con trỏ chuột lên trên hình ảnh, hình ảnh sẽ tự động phóng lớn lên.
[adsense][/adsense]
Space
Mac Dock
Danh sách các liên kết như cơ bản và chuyển thành một OS X incon dock. Thật tuyệt vời!
Drop-In Modals
Với các hiệu ứng và thuộc tính CSS3, Drop In Modals có thể giúp bạn thực hiện nhanh chóng để tạo ra các modal với các animation đơn giản.
Sliding Vinyl
Hiệu ứng vinyl có thể được tạo ra bằng cách sử dụng CSS3 transition và một chút HTML. Có thể sử dụng hiệu ứng này để làm một bìa album để có một phong cách thú vị.
Zooming Polaroids
Polaroid là một hình ảnh được đặt trong khung và vứt ngẫu nhiên, được phân loại thông qua các kỹ thuật CSS3. Văn bản đi kèm được lấy từ các thẻ ‘title’ và ‘alt’.
Animated Rocket
Nguyên tắc của Animatid Roket là CSSEffect. Transformation thay đổi sự xuất hiện của một phần tử trong browser, di chuyển, xoay, hoặc các chuyển động khác.
Poster Circle
Poster Circle. là một là một cột quay động bao gồm một dãy các hộp màu và văn bản. Hiệu ứng tổng thể thật là điên rồ và chóng mặt :D
Morphing Cubes
Morphing Cubes sẽ cho thấy một số nội dung thú vị hơn khi sử dụng 3D transformation, animation và transition. Lưu ý rằng bạn vẫn có thể lựa chọn văn bản trong các yếu tố, ngay cả khi quay.
Animated Polaroid Gallery
Đống hình ảnh ngẫu nhiên và khi di chuyển con trỏ chuột lên một hình ảnh, hình ảnh được chọn sẽ mở lớn lên.
Spotlight Cast Shadow
Khi con trỏ chuột di chuyển như thể là ánh đèn sân khấu soi sáng văn bản và dàn diễn viên.
Colorful Clock
