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:
Trượt từ trái sang phải
Trượt từ phải sang trái
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.
Belum ada tanggapan untuk "Hiệu ứng gạch chân trượt cho Blogger"
Post a Comment