Kênh Tên Miền chuyên cung cấp tên miền đẹp, giá rẻ! Hãy liên hệ kỹ thuật: 0914205579 - Kinh doanh: 0912191357 để được tư vấn, hướng dẫn miễn phí, Cảm ơn quý khách đã ủng hộ trong thời gian qua!
kiem tien, kiem tien online, kiem tien truc tuyen, kiem tien tren mang
Sunday, May 18, 2014

Hướng dẫn


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ẽ đó ở bài viết này mình xin hướng dẫ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.

Ví dụ:



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 nhưng gây được nhiều thiện cảm đến khách truy cập, nếu bạn tinh ý bạn sẽ thấy nếu tô điểm một cách đúng cách cho website của bạn, bạn sẽ được rất nhiều người dùng ưu ái.

0 comments:

Post a Comment

Popular Posts