970x90

Hiệu ứng gạch trượt chân cho Blogger
Hiệu ứng gạch trượt chân 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.
Demo

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

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


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.

Ví dụ:
<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.

Đăng nhận xét

Nguyễn Duy Giang

{picture#https://1.bp.blogspot.com/-g9yBlmBaTqE/WrjioUbUeRI/AAAAAAAAkog/Bz6Nhx7FvOwb0F9nFWJ1tPPtaZLiTWfJwCLcBGAs/s1600/nguyen-duy-giang.png} GIỚI THIỆU VỀ TÔI {facebook#https://www.facebook.com/ernestonguyengiang} {twitter#https://twitter.com/duygiangnguyen} {google#https://plus.google.com/u/1/+NguyenDuyGiang} {pinterest#https://www.pinterest.com/nguyenduygiang/} {youtube#https://youtube.com/nguyenduygiang} {instagram#https://www.instagram.com/nguyenduygiang/}
Được tạo bởi Blogger.