Box hover chuyển động thành phần
Mỗi vị trí lần lượt xuất hiện với hiệu ứng slide hay fade đều được điều khiển đơn giản với các thuộc tính CSS3 kết hợp như opacity, transition, position.
Trình duyệt – hệ điều hành hỗ trợ
Yêu cầu phiên bản với mức tối thiểu được hỗ trợ:
Trình duyệt
10
4
10.5
4
5.1
Hệ điều hành Smartphone – Tablets
3.2
2.1
8
box hover – slider
- Kỹ thuật áp dụng là sử dụng thay đổi position cho từng item khác nhau, mỗi item gán một vị trí khác nhau, và thời gian transition khác nhau.
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<style>
* { /* reset lại margin và padding cho các tag */
margin: 0;
padding: 0;
}
img { vertical-align:middle; }
.box-item-slide {
height: auto;
margin: 10px auto;
overflow: hidden;
position: relative;
width: 200px;
}
.box-item-slide img {
max-width: 100%;
}
.box-item-slide .item-slide {
background-color: #FFF;
border-radius: 4px;
position: absolute;
padding: 5px 10px;
right: -100%;
}
.box-item-slide .item-slide01 {
top: 30%;
transition: all 0.5s;
}
.box-item-slide .item-slide02 {
top: 45%;
transition: all 1s;
}
.box-item-slide .item-slide03 {
top: 60%;
transition: all 1.5s;
}
.box-item-slide:hover .item-slide01 {
right: 65%;
}
.box-item-slide:hover .item-slide02 {
right: 45%;
}
.box-item-slide:hover .item-slide03 {
right: 25%;
}
</style>
</head>
<body>
<div class="box-item-slide">
<img src="https://hocwebchuan.com/images/chuyende/bnr_product01.jpg" alt="">
<span class="item-slide01 item-slide">item 1</span>
<span class="item-slide02 item-slide">item 2</span>
<span class="item-slide03 item-slide">item 3</span>
</div>
</body>
</html>
Hiển thị trình duyệt:
box hover – slider up
- Kỹ thuật sử dụng giống như trên, khác nhau là thay vì thay đổi vị trí right, chúng ta sẽ thay đổi vị trí bottom, có thể áp dụng tương tự cho top và left.
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<style>
* { /* reset lại margin và padding cho các tag */
margin: 0;
padding: 0;
}
img { vertical-align:middle; }
.box-item-slideup {
width: 200px;
margin: 10px auto;
height: auto;
overflow: hidden;
position: relative;
}
.box-item-slideup img {
max-width: 100%;
}
.box-item-slideup .item-slideup {
background-color: #FFF;
border-radius: 4px;
position: absolute;
padding: 5px 10px;
bottom: -100%;
}
.box-item-slideup .item-slideup01 {
right: 65%;
transition: all 0.5s;
}
.box-item-slideup .item-slideup02 {
right: 45%;
transition: all 1s;
}
.box-item-slideup .item-slideup03 {
right: 25%;
transition: all 1.5s;
}
.box-item-slideup:hover .item-slideup01 {
bottom: 60%;
}
.box-item-slideup:hover .item-slideup02 {
bottom: 45%;
}
.box-item-slideup:hover .item-slideup03 {
bottom: 30%;
}
</style>
</head>
<body>
<div class="box-item-slideup">
<img src="https://hocwebchuan.com/images/chuyende/bnr_product01.jpg" alt="">
<span class="item-slideup01 item-slideup">item 1</span>
<span class="item-slideup02 item-slideup">item 2</span>
<span class="item-slideup03 item-slideup">item 3</span>
</div>
</body>
</html>
Hiển thị trình duyệt:
box hover – fade
- Kỹ thuật này không giống 2 phần trên, chúng ta cố định vị trí các item, phần cần xử lý là cho opacity thay đổi từ 0 tới 1 khi hover, tất nhiên không thể thiếu transition cho hiệu ứng thêm mượt mà.
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<style>
* { /* reset lại margin và padding cho các tag */
margin: 0;
padding: 0;
}
img { vertical-align:middle; }
.box-item-fade {
height: auto;
margin: 10px auto;
width: 200px;
overflow: hidden;
position: relative;
}
.box-item-fade img {
max-width: 100%;
}
.box-item-fade .item-fade {
background-color: #FFF;
border-radius: 4px;
position: absolute;
padding: 5px 10px;
opacity: 0;
}
.box-item-fade .item-fade01 {
right: 65%;
top: 30%;
transition: opacity 0.5s;
}
.box-item-fade .item-fade02 {
right: 45%;
top: 45%;
transition: opacity 1.5s;
}
.box-item-fade .item-fade03 {
right: 25%;
top: 60%;
transition: opacity 2.5s;
}
.box-item-fade:hover .item-fade {
opacity: 1;
}
</style>
</head>
<body>
<div class="box-item-fade">
<img src="https://hocwebchuan.com/images/chuyende/bnr_product01.jpg" alt="">
<span class="item-fade01 item-fade">item 1</span>
<span class="item-fade02 item-fade">item 2</span>
<span class="item-fade03 item-fade">item 3</span>
</div>
</body>
</html>
Xin cho hỏi: có thể chèn link vào các chữ “item” khi nó hiện lên không ạ?
Xin cảm ơn nhiều.
Xin chào bạn.
Việc chèn link là bình thường nhe.
Vì xử lý hiệu ứng chỉ sử dụng css.
Thân.