Code tạo chữ Hiệu ứng Trượt dưới chân đơn giản cho Blogspot

Anh Trai Nắng
24
Code CSS này cung cấp tạo ra hiệu ứng trượt dưới chân không khi người dùng di chuột qua hoặc đưa chuột vào phần tử.

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.

Code tạo chữ Hiệu ứng Trượt dưới chân đơn giản cho Blogspot
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:

Trượt từ trái sang phải

Trượt từ phải sang trái

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!

Đăng nhận xét

HƯỚNG DẪN BÌNH LUẬN

24 Nhận xét

  1. Bài viết hữu ích :)) Cho 1 share nhé!

    Trả lờiXóa
  2. Thanks bác nhé :)) Đúng cái e đang cần :v

    Trả lờiXóa
  3. Không được đẹp lắm. Trượt hơi quá :v

    Trả lờiXóa
  4. làm sao để kiếm ]]> z ai chỉ vs :(

    Trả lờiXóa
  5. Trả lời
    1. Hoan 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óa
    2. Cạn lời thanh niên Phú Cường Blogger :v

      Xóa
  6. Icon Đẹp Ghê :)) :D =)) ^.^ (3) ^-^

    Trả lờiXóa
  7. uk có gì mượn bài trỏ nguồn về bác <3

    Trả lờiXóa
  8. bạn ơi mình muốn tạo menu trong thì làm thế nào

    Trả lờiXóa
Đăng nhận xét

#buttons=(Thanks!) #days=(7)

À mình có làm website tăng tương tác MXH giá rẻ. Mọi người nếu cần thì ghé sử dụng các dịch vụ thử nha. Ghé xem dịch vụ
Ok, Go it!

HƯỚNG DẪN BÌNH LUẬN

Chèn link

Sử dụng công cụ Tạo link

Chèn hình ảnh

LINK_ANH - sử dụng công cụ upload ảnh. Và chỉ cần lấy link ảnh chèn vào bình luận là ảnh tự động hiển thị.

Định dạng chữ

<b>Chữ in đậm</b>
<i>Chữ in nghiêng</i>
<u>Chữ gạch chân</u>
<strike>Chữ gạch ngang</strike>

Chèn một đoạn Code

Đầu tiên sử dụng công cụ này để mã hóa đoạn code muốn chèn.
Sau đó dùng thẻ [code] CODE_ĐÃ_MÃ_HÓA [/code]

Khác

Nhập Email bạn hay dùng để nhận thông báo khi mình trả lời bình luận của bạn.
Vui lòng không nhập bất kỳ Liên kết Spam nào trong hộp nhận xét.
Tích vào ô "Thông báo cho tôi" để nhận thông báo nội dung phản hồi của bình luận.
Chèn emoji: Nhấn tổ hợp phím “Windows + . (dấu chấm)”

Đã hiểu