Hôm nay Pu sẽ tăng thêm độ Code (cơ mà vẫn rất dễ làm) để làm slide trượt bằng CSS3
Về việc Slide ảnh thì anh An có đề cập bài trước. Nhưng theo hướng dẫn trước thì slide có 1 nhược điểm là chạy không theo ý muốn mình nên hôm nay Pu share cái này thêm cho các bạn.
1. Chèn đoạn css bên dưới vào trước thẻ ]]></b:skin>
2. Tạo 1 HTML ở ngay đầu blog hoặc tạo 1 post riêng để kiểm chứng kết quả cũng được ^^#slider {
width: 845px;
height: 200px;
position: relative;
overflow: hidden;
background: #434343;
}
#slider [id^='image']:target img {
top: 0;
}
#slider [id^="image"] img {
position: absolute;
top: -200px;
border: 0;
-moz-transition: top 0.5s ease-in;
-ms-transition: top 0.5s ease-in;
-webkit-transition: top 0.5s ease-in;
-o-transition: top 0.5s ease-in;
}
#slider [id^='image']:target a {
background: #fff;
border: 3px solid #333;
width: 10px;
height: 10px;
}
.slider-nav {
background: #333;
width: 16px;
z-index: 9999;
height: 16px;
box-shadow: inset 0px 2px 10px rgba(0,0,0,0.3), 0px 0px 20px rgba(255,255,255,0.4);
border-radius: 32px;
position: absolute;
bottom: 15px;
}
#image-1 .slider-nav { right: 80px; }
#image-2 .slider-nav { right: 60px; }
#image-3 .slider-nav { right: 40px; }
#image-4 .slider-nav { right: 20px; }
Paste đoạn code này vào
<div id="slider">Trong các phần màu đỏ đánh dấu ở trên là phần bạn thay ảnh khác bằng Style của bạn ^^~
<div id="image-1">
<a href=""><img src="http://4.bp.blogspot.com/-uQHWHdvMNlg/T3fcqe2H0uI/AAAAAAAAA84/QLDPpAJ1SGA/s1600/4.jpg" alt="" /></a>
<a class="slider-nav" href="#image-1"></a>
</div>
<div id="image-2">
<a href=""><img src="http://3.bp.blogspot.com/-JQp1VDovfDM/T3fcpFqLj3I/AAAAAAAAA8o/mofV_nV7rOs/s1600/1.jpg" alt="" /></a>
<a class="slider-nav" href="#image-2"></a>
</div>
<div id="image-3">
<a href=""><img src="http://4.bp.blogspot.com/-WJ4115gaNss/T3fcp0uV1QI/AAAAAAAAA8w/6PLWPWzrhKE/s1600/2.jpg" alt="" /></a>
<a class="slider-nav" href="#image-3"></a>
</div>
<div id="image-4">
<a href=""><img src="http://2.bp.blogspot.com/-a0THdZPHLuY/T3fcp_4il1I/AAAAAAAAA8s/GGxa3Lvk7_8/s1600/3.jpg" alt="" /></a>
<a class="slider-nav" href="#image-4"></a>
</div>
</div>
Bây giờ đã đọc và liếc sơ qua code thì hãy chú ý những điểm sau:
Đăng nhận xét