Hiệu ứng gạch chân trượt cho Blogger

Chúng ta luôn muốn có một website thật đẹp, nhưng bên cạnh vẻ đẹp đó chúng ta cũng cần thêm những hiệu ứng bắt mắt để thu hút được cái nhìn của người đọc hơn, chính vì lẽ đó rất nhiều hiệu ứng mới được ra đời và ở bài viết này mình xin giới thiệu đến các bạn thêm hiệu ứng gạch chân trượt ngang khi rê chuột vào một văn bản, một được dẫn nhất định.

Thế hiệu ứng gạch chân trượt là gì vậy nghe lạ đời qua, sau đây thì mình xin cho bạn môt vài ví dụ thực tế để các bạn thưởng thức:

Bước 1: Chèn CSS

Vào Mẫu > Chỉnh sửa HTML và thêm đoạn css phía dưới vào trước thẻ ]]></b:skin>

/* Underline Slide */
.uslide {
display: inline-block;
}
.uslide:after {
content: '';
display: block;
height: 3px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.uslide:hover:after {
width: 100%;
background: #990000;
}
/*Slide Right To Left*/
.uslide2 {
display: inline-block;
position: relative;
padding-bottom: 3px;
}
.uslide2:after {
content: '';
display: block;
position: absolute;
right: 0;
bottom: 0;
height: 3px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.uslide2:hover:after {
width: 100%;
background: #990000;
}

Bước 2:  Sử dụng

Sử dụng rất đơn giản bạn chỉ cần thêm thuộc tính class="uslide" hoặc class="uslide2" để có hiệu ứng. VD:

<div class="uslide">
<b>Trượt từ trái sang phải</b></div>

<div class="uslide2">
<b>Trượt từ phải sang trái</b></div>

Đây là một trong rất nhiều những hiệu ứng đơn giản và khá là hay, chắc chắn rằng rất nhiều người sẽ cảm thấy thích thú với hiệu ứng này, nếu bạn tinh ý bạn sẽ thấy nếu tô điểm một cách đúng cách cho blog của mình, bạn sẽ được rất nhiều người dùng ưu ái.