Thủ thuật blogspot - Dautoblog

Code Tạo SlideShow Ảnh-kiểu 4

Code Tạo SlideShow Ảnh-kiểu 4
Đây là Slideshow mượt mà sử dụng CSS3 áp dụng cho blog để bạn có thể giới thiệu với mọi người về bộ sưu tập ảnh của bạn.Tuy đơn giản nhưng ưu điểm là sử dụng CSS3 nên nhẹ nhàng so với sử dụng jquery
Xem thử:

DEMO


Code:
<style>
.content h1 {
font-size:48px;
color:#000;
text-shadow:0px 1px 1px #f4f4f4;
text-align:center;
padding:60px 0 30px;
}

/* LAYOUT */
.container {
margin:0 auto;
overflow:hidden;
width:600px;
}

/* CONTENT SLIDER */
#content-slider {
width:600px;
height:360px;
margin:10px auto 0;
}
/* SLIDER */
#slider {
background:#000;
border:5px solid #eaeaea;
box-shadow:1px 1px 5px rgba(0,0,0,0.7);
height:320px;
width:600px;
margin:40px auto 0;
overflow:visible;
position:relative;
}
#mask {
overflow:hidden;
height:320px;
}
#slider ul {
margin:0;
padding:0;
position:relative;
}
#slider li {
width:600px;
height:320px;
position:absolute;
top:-325px;
list-style:none;
}

#slider li.firstanimation {
-moz-animation:cycle 25s linear infinite;
-webkit-animation:cycle 25s linear infinite;
}
#slider li.secondanimation {
-moz-animation:cycletwo 25s linear infinite;
-webkit-animation:cycletwo 25s linear infinite;
}
#slider li.thirdanimation {
-moz-animation:cyclethree 25s linear infinite;
-webkit-animation:cyclethree 25s linear infinite;
}
#slider li.fourthanimation {
-moz-animation:cyclefour 25s linear infinite;
-webkit-animation:cyclefour 25s linear infinite;
}
#slider li.fifthanimation {
-moz-animation:cyclefive 25s linear infinite;
-webkit-animation:cyclefive 25s linear infinite;
}

#slider .tooltip {
background:rgba(0,0,0,0.7);
width:300px;
height:60px;
position:relative;
bottom:75px;
left:-320px;
-moz-transition:all 0.3s ease-in-out;
-webkit-transition:all 0.3s ease-in-out;
}
#slider .tooltip h1 {
color:#fff;
font-size:24px;
font-weight:300;
line-height:60px;
padding:0 0 0 20px;
}
#slider li#first:hover .tooltip,
#slider li#second:hover .tooltip,
#slider li#third:hover .tooltip,
#slider li#fourth:hover .tooltip,
#slider li#fifth:hover .tooltip {
left:0px;
}
#slider:hover li,
#slider:hover .progress-bar {
-moz-animation-play-state:paused;
-webkit-animation-play-state:paused;
}

/* PROGRESS BAR */
.progress-bar {
position:relative;
top:-5px;
width:600px;
height:5px;
background:#000;
-moz-animation:fullexpand 25s ease-out infinite;
-webkit-animation:fullexpand 25s ease-out infinite;
}

/* ANIMATION */
@-moz-keyframes cycle {
0% { top:0px; }
4% { top:0px; }
16% { top:0px; opacity:1; z-index:0; }
20% { top:325px; opacity:0; z-index:0; }
21% { top:-325px; opacity:0; z-index:-1; }
92% { top:-325px; opacity:0; z-index:0; }
96% { top:-325px; opacity:0; }
100%{ top:0px; opacity:1; }

}
@-moz-keyframes cycletwo {
0% { top:-325px; opacity:0; }
16% { top:-325px; opacity:0; }
20% { top:0px; opacity:1; }
24% { top:0px; opacity:1; }
36% { top:0px; opacity:1; z-index:0; }
40% { top:325px; opacity:0; z-index:0; }
41% { top:-325px; opacity:0; z-index:-1; }
100%{ top:-325px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclethree {
0% { top:-325px; opacity:0; }
36% { top:-325px; opacity:0; }
40% { top:0px; opacity:1; }
44% { top:0px; opacity:1; }
56% { top:0px; opacity:1; }
60% { top:325px; opacity:0; z-index:0; }
61% { top:-325px; opacity:0; z-index:-1; }
100%{ top:-325px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclefour {
0% { top:-325px; opacity:0; }
56% { top:-325px; opacity:0; }
60% { top:0px; opacity:1; }
64% { top:0px; opacity:1; }
76% { top:0px; opacity:1; z-index:0; }
80% { top:325px; opacity:0; z-index:0; }
81% { top:-325px; opacity:0; z-index:-1; }
100%{ top:-325px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclefive {
0% { top:-325px; opacity:0; }
76% { top:-325px; opacity:0; }
80% { top:0px; opacity:1; }
84% { top:0px; opacity:1; }
96% { top:0px; opacity:1; z-index:0; }
100%{ top:325px; opacity:0; z-index:0; }
}

@-webkit-keyframes cycle {
0% { top:0px; }
4% { top:0px; }
16% { top:0px; opacity:1; z-index:0; }
20% { top:325px; opacity:0; z-index:0; }
21% { top:-325px; opacity:0; z-index:-1; }
50% { top:-325px; opacity:0; z-index:-1; }
92% { top:-325px; opacity:0; z-index:0; }
96% { top:-325px; opacity:0; }
100%{ top:0px; opacity:1; }

}
@-webkit-keyframes cycletwo {
0% { top:-325px; opacity:0; }
16% { top:-325px; opacity:0; }
20% { top:0px; opacity:1; }
24% { top:0px; opacity:1; }
36% { top:0px; opacity:1; z-index:0; }
40% { top:325px; opacity:0; z-index:0; }
41% { top:-325px; opacity:0; z-index:-1; }
100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclethree {
0% { top:-325px; opacity:0; }
36% { top:-325px; opacity:0; }
40% { top:0px; opacity:1; }
44% { top:0px; opacity:1; }
56% { top:0px; opacity:1; z-index:0; }
60% { top:325px; opacity:0; z-index:0; }
61% { top:-325px; opacity:0; z-index:-1; }
100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclefour {
0% { top:-325px; opacity:0; }
56% { top:-325px; opacity:0; }
60% { top:0px; opacity:1; }
64% { top:0px; opacity:1; }
76% { top:0px; opacity:1; z-index:0; }
80% { top:325px; opacity:0; z-index:0; }
81% { top:-325px; opacity:0; z-index:-1; }
100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclefive {
0% { top:-325px; opacity:0; }
76% { top:-325px; opacity:0; }
80% { top:0px; opacity:1; }
84% { top:0px; opacity:1; }
96% { top:0px; opacity:1; z-index:0; }
100%{ top:325px; opacity:0; z-index:0; }
}

/* ANIMATION BAR */
@-moz-keyframes fullexpand {
0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }
}
@-webkit-keyframes fullexpand {
0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }
}</style>
<div class="container">
<div id="content-slider">
<div id="slider">
<div id="mask">
<ul>
<li class="firstanimation" id="first">
<a href="#">//URL liên kết
<img alt="Green" src="Link ảnh 1" />
</a>
<div class="tooltip">
<h1>
Green</h1>
//Chú thích cho ảnh
</div>
</li>
<li class="secondanimation" id="second">
<a href="#">//URL liên kết
<img alt="Car" src="Link ảnh 2" />
</a>
<div class="tooltip">
<h1>
Car</h1>
//Chú thích cho ảnh
</div>
</li>
<li class="thirdanimation" id="third">
<a href="#">//URL liên kết
<img alt="Nature" src="Link ảnh 3" />
</a>
<div class="tooltip">
<h1>
Nature</h1>
//Chú thích cho ảnh
</div>
</li>
<li class="fourthanimation" id="fourth">
<a href="#">//URL liên kết
<img alt="Nature" src="Link ảnh 4" />
</a>
<div class="tooltip">
<h1>
Nsture</h1>
//Chú thích cho ảnh
</div>
</li>
<li class="fifthanimation" id="fifth">
<a href="#">//URL liên kết
<img alt="Yellow" src="Link ảnh 5" />
</a>
<div class="tooltip">
<h1>
Yellow</h1>//Chú thích cho ảnh
</div>
</li>
</ul>
</div>
<div class="progress-bar" div="">
</div>
</div>
</div>
</div>

Bạn thay link ảnh của bạn vào nhé và ghi chú thích cùng việc gắn liên kết tới địa chỉ bạn muốn.
Comments blogger

Không có nhận xét nào :