Làm Web

  • Design
  • Freebies
  • Tuts
  • Tools
  • Development
    • HTML / CSS
    • JavaScript
    • PHP
    • Ghost
  • WordPress
  • Info
    • Photography

50 Animation Tuyệt Vời Với CSS3 ( Phần 1 )

By Thien Do • 11/09/2013 • Web Development

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

CSS animationsCSS3hiệu ứng CSS3làm CSS3thủ thuật CSS3
Tweet
2
Infographic Về Việc Sử Dụng Mạng Xã Hội Trong Học Đường
15 Ví Dụ Các Trang Web Có Thiết Kế Sạch Sẽ và Tối Thiểu

About the Author

Thien Do

Là một PHP developer nhưng mình muốn tìm hiểu nhiều hơn về CSS và JavaScript. Mình yêu thích những trang web đẹp và sáng tạo, đó là lý do tại sao mà mình thích chia sẻ chúng với các bạn.

You Might Also Like

  • Làm Thế Nào Để Tạo Ra Các Hiệu Ứng Động CSS3 Mà Không Cần Viết Code

  • 3 Giải Pháp Hỗ Trợ Hiệu Quả Trên Internet Explorer

  • Border-radius: Tạo Góc Tròn Với CSS!

  • Giải Pháp Responsive Cho Video Trên Trang Web Của Bạn

    Giải Pháp Responsive Cho Video Trên Trang Web Của Bạn

Liên hệ mua trang web này

Email: info@thiendo.com
Phone: 0914 22 12 02

Bài viết được quan tâm

CSS position: fixed Trong Các Trình Duyệt Di Động

On 08/07/2013
01

Xu Hướng Mới Trong Thiết Kế Web

On 06/08/2013
02

19 Ví Dụ về Thiết Kế Web Tối Giản

On 16/07/2013
03

25 Bài Hướng Dẫn Tạo Hiệu Ứng Chữ Đẹp với CSS3

On 16/06/2013
04

Fontbox.vn – Thư viện Font Tiếng Việt tuyệt đẹp

On 05/06/2013
05

Find us on Facebook

Lamweb.com
Facebook Twitter

LÀM WEB - CHIA SẺ THÔNG TIN, XU HƯỚNG, CÔNG NGHỆ VÀ CÁC THỦ THUẬT WEB

© 2019 LamWeb.com - All rights reserved.