TẠO Marquee NÂNG CAO VỚI CSS3 Animation

Thông thường hiệu ứng Marquee mang lại cho chúng ta cảm giác khá nhàm chán, với dòng chữ chạy từ phải sang trái hoặc ngược lại. Còn nữa , khi chạy thường thì rất khó đọc chữ  mà còn hay bị giật.

Hôm nay mình sẽ chia sẻ với các bạn cách nâng cao cho hiệu ứng marquee vốn dĩ nhàm chán này trở nên sinh động và hấp dẫn hơn. Các bạn có thể xem demo bài viết để hiểu rõ hơn những điều mình nói.

Demo

Chỉ cần kết hợp với CSS3 Animation,và với vài bước cơ bản như sau:

Bước 1 : HTML

Bước 2 : Định dạng CSS cơ bản

Chúng ta sẽ cần đoạn css cơ bản như sau cho hiệu ứng marquee.

Bước 3 : Tạo hiệu ứng

Trong bài viết này, mình sẽ chia sẻ với các bạn cách làm hiệu ứng chữ chạy từ trên xuống dưới. các bạn có thể xem toàn bộ hiệu ứng khác bằng cách download demo về máy của mình để tham khảo.

Và sau đây là đoạn css giúp bạn tạo hiệu ứng :

Bây giờ các bạn chỉ cần việc lưu lại và kiểm tra kết quả ở trình duyệt. Và cũng như mọi khi , chỉ có các trình duyệt là Firefox 8+Chrome 12+ và Safari 5.0+ là có thể xem được hiệu ứng này. Tuy nhiên các bạn nên nhớ thêm vào tiền tố (-moz- và -webkit-) nhé.

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

Please follow and like us:

Leave Comment

Thư điện tử của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *