Chào các bạn, hôm nay mình xin chia sẽ các bạn code hiệu ứng trượt dưới chân chữ cực kì độc đáo để gây ấn tượng cũng như tô thêm vẻ đẹp, chuyên nghiệp cho blog của các bạn.
Hiệu ứng Trượt dưới chân đơn giản cho Blogspot. |
Đây là một đoạn mã CSS đơn giản nhưng hiệu quả để tạo hiệu ứng trượt dưới chân không khi người dùng tương tác với phần tử. Các bạn xem demo dưới đây:
Các Bước Thực Hiện
Bước 1: Chèn CSS Sau đây vào trước ]]></b:skin>
.truot{display:inline-block}.truot:after{content:'';display:block;height:2px;width:0;background:transparent;transition:width .5s ease,background-color .5s ease}.truot:hover:after{width:100%;background:#138882}
.truot2{display:inline-block;position:relative}.truot2:after{content:'';display:block;position:absolute;right:0;bottom:0;height:2px;width:0;background:transparent;transition:width .5s ease,background-color .5s ease}.truot2:hover:after{width:100%;background:#138882}
Bước 2: Chèn Đoạn Code bên dưới vào nơi muốn hiển thị.
Trượt từ trái sang phải
<div class="truot">
Chữ Cần Tạo Hiệu Ứng</div>
Trượt từ phải sang trái
<div class="truot2>
Chữ Cần Tạo Hiệu Ứng</div>
Lời Kết
Chỉ vài bước đơn giản trên các bạn đã có một hiệu ứng đẹp mắt cho blog của các rồi. Các bạn có thể áp dụng code này để thêm vào các thẻ H2, H3 sẽ rất đẹp. Nếu các bạn thấy hữu ích đừng quên cho mình 1 share và để lại 1 comment bên dưới nhé.
Chúc Các Bạn Thành Công!
đít đìn địt :v
Trả lờiXóavãi =)))
XóaBài viết hữu ích :)) Cho 1 share nhé!
Trả lờiXóaCảm ơn Tính ♥
XóaEm chứ ♥ Anh lớn tuổi hơn em mà :)
XóaThanks bác nhé :)) Đúng cái e đang cần :v
Trả lờiXóa:3 Ngại quá, ahihi.
XóaKhông được đẹp lắm. Trượt hơi quá :v
Trả lờiXóaTrượt hơi quá là sao :))))
XóaKcj :V Sửa CSS lại xí là được mà
Xóa- chất
Trả lờiXóaCảm ơn em.
Xóalàm sao để kiếm ]]> z ai chỉ vs :(
Trả lờiXóaCtrl + F và dán ]]></b:skin> vào nhé!
XóaHh
Trả lờiXóa"Hh" ??
XóaHoan hô, hay hay, hihi, hehe, haha, hoho, hào hứng, hí hửng, hụt hẫng, hờ hững, hảo hảo, hậm hực, hồi hộp... tùy ý mà chọn nhé :v
XóaCạn lời thanh niên Phú Cường Blogger :v
XóaIcon Đẹp Ghê :)) :D =)) ^.^ (3) ^-^
Trả lờiXóa:v icon lấy bên blog em đấy :3
Xóabài viết hữu ích like
Trả lờiXóaCảm ơn quốc ♥
Xóauk có gì mượn bài trỏ nguồn về bác <3
Trả lờiXóabạn ơi mình muốn tạo menu trong thì làm thế nào
Trả lờiXóa