Thiết kế web HTML5: CSS3 thay thế java làm hiệu ứng hoạt ảnh

CSS3 ra đời với rất nhiều hiệu ứng rất dễ thương, ở bài trước mình đã giới thiệu một số hiệu ứng CSS3 thú vị đặc biệt dành cho hover chuột. Nhưng có một điểm khuyết là các hiệu ứng đấy chạy chưa mượt mà đơn thuần chỉ là nhảy đổi tượng. Để cho hiệu ứng có thể chuyển hình dạng lớn nhỏ hay tròn méo một cách mượt mà, các bạn có thể dùng CSS sau thay thế cho javacript rất đơn giản.

Thuộc tính của tag mẹ:

-webkit-transition:All 0.3s ease;

-o-transition:All 0.3s ease;

-moz-transition:All 0.3s ease;

* Chỉ số 0.3s là hiệu ứng sẽ chạy trong vòng 0.3 giây sẽ hoàn tất, các bạn có thể điều chỉnh nhanh chậm tùy ý.

* Dạng transition hiệu ứng: có nhiều dạng di chuyển hiệu ứng khác nhau, tùy theo tốc độ nhưng với những hiệu ứng nhanh dưới 1 giây thì cũng không khác biệt nhiều nhé các bạn.

• ease
• linear
• ease-in
• …

Cách thực hiện như sau, tạo một đối tượng với CSS bình thường tạm gọi là CSS mẹ và CSS hover dử dụng các hiệu ứng CSS3 như bài trước hướng dẫn: rotate, skew, scale, …

Lúc này bạn cho chạy trên trình duyệt sẽ thấy đã có hiệu ứng hover nhưng chạy không mượt, đơn thuần chỉ là nhảy ảnh mà không chạy hoạt ảnh, như vậy cũng không thú vị phải không các bạn. Các bạn hãy thêm các code transition trên vào css mẹ và xem thử hiệu ứng như thế nào.

Rất tuyệt phải không, không cần đến javascript để có hiệu ứng như vậy, các bạn có thể điều chỉnh tốc độ bằng cách biến con số 0.3s thành số khác và dạng hoạt ảnh.

Các bạn có thể xem 1 trong các hoạt ảnh đó ở website sau: http://thietkewebhtml5.net/

CSS3 mở ra một thế giới khá mới mẻ giúp tối ưu web với các hiệu ứng đơn giản mà không cần javascript, các hãy biết tận dụng CSS3 để làm web mình đẹp hơn.

Chúc các bạn thành công.

Lưu ý: Hiệu ứng chỉ chạy được trên nền trình duyệt Chrome và Opera nhé các bạn

Nguồn: seoweb24h.com