28 hiệu ứng hover tuyệt đẹp bằng css3 (Phần 1)

Trong ngày hôm nay, tôi sẽ cho bạn thấy những  hiệu ứng văn bản CSS3 tuyệt vời: hiệu ứng 3D bằng cách sử dụng văn bản-bóng, hiệu ứng với độ dốc và mặt nạ hình ảnh, hiệu ứng với quá trình chuyển đổi và background-clip, và nhiều hơn nữa. Tất cả họ chắc chắn sẽ hữu ích cho bạn, bởi vì CSS3 cho phép chúng ta đạt được một kết quả thật sự ấn tượng. Một phần của hiệu ứng mô tả hoạt động trong hầu hết các trình duyệt hỗ trợ CSS3, tuy nhiên, một vài ví dụ sẽ chỉ làm việc trong Webkit. Vì vậy, để có được những ấn tượng hơn, tôi khuyên bạn nên xem demo của chúng tôi trong các trình duyệt Webkit: Chrome hoặc Safari.  

01: Image size

 

02: Zoom in

 

03: Zoom out

 

04: Border radius and shadow effect

 

05: Border radius distortion

 

06: Border radius distortion II

 

07: Glowing border

 

08: Rotation (2D)

 

09: Skew

 

10: Translate and opacity

 

11: Flip

 

12: Vertical card flip

 

13: Transformation

 

14: 3D text

 

15: Blur

 

16: Glowing text

 

17: Image with text overlay – fade effect

 

18: Image with text overlay – scale effect

 

19: Image with text overlay – text slide effect

 

20: Image and text slide hover effect

 

3.4/5 - (5 bình chọn)