纯CSS3的带缩略图滑动相册特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是纯CSS3的带缩略图滑动相册特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>纯CSS3的带缩略图滑动相册</title>


<style type="text/css">

* {
	margin: 0;
	padding: 0;
}

img {border: none;}

a {outline: none;}

body {
	font-family: Helvetica, Verdana, Arial, sans-serif;
	background: url(images/post-BG.png) repeat;
	text-align: center;
	color: #fff;
}

h1 {
	margin: 30px 0 0 0;
	text-shadow: #d6d6d6 0px 1px 2px;
	color: #030303
}

h3 {
	margin: 10px 0 10px 0;
	text-shadow: #d6d6d6 0px 1px 2px;
	color: #030303
}



/* Fades in the slideshow. Hides the initial animation on the li tag. Ooops!! */

@-webkit-keyframes fadeIn {
	0% {
		opacity: 0;
		
	}
	
	50% { 
		opacity: 0;
	}
	
	100% { 
		opacity: 1;
	}
}

#box {
	text-align: left;
	width: 700px;
	margin: 30px auto 0 auto;
	background: #000;
	overflow: hidden;
	border: 10px solid #000;
	-webkit-box-shadow: #131313 0px 2px 10px;
	-moz-box-shadow: #131313 0px 3px 10px;
	box-shadow: #131313 0px 3px 10px;	
	-webkit-animation-name: fadeIn; 
  	-webkit-animation-duration: 3s; 
  	-webkit-animation-iteration-count: 1;
  	-webkit-animation-delay: 0s;
}

ul#slider{
	-webkit-border-radius: 10px;
	margin: 0px;
	padding: 0px;
	list-style: none;
	position: relative;
	width: 700px;
	height: 438px;
	overflow: hidden;	
}

ul#thumb {
	overflow: none;
	margin: 0px 0px 0px 0px;
	padding: 0px;
	list-style: none;
	position: relative;
	background: #000;
	overflow: auto;
	width: 700px;
}

ul#thumb a {
	-webkit-transition: opacity .2s ease-in-out;
	border: 1px solid #979797;
	width: 35px;
	height: 35px;
	display: block;
	overflow: hidden;
	float: right;
	margin: 10px 0px 0px 10px;
	opacity: 0.75;
}

ul#thumb a:hover {
	opacity: 1;
} 

ul#slider li {	
	width: 700px;
	height: 438px;
	position: absolute;
	}
	
ul#slider li p {
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: inherit;
	color: #fff;
	background: rgba(0, 0, 0, .5);
	width: 100%;
}

ul#slider li p span {
	line-height: 1.2em;
	padding: 10px;
	display: block;
}

/* Animation for the :target image. Slides the image in. */

@-webkit-keyframes moveTarget {
	0% {
		left:-700px;
		
	}
	
	100% { 
		left:0px;
	}
}


ul#slider li:target {
	-webkit-animation-name: moveTarget; 
	-webkit-animation-duration: .5s; 
	-webkit-animation-iteration-count: 1;
	top:0px;
	left: 0px;
	z-index: 10;
}

/*
Animation for the current image. Slides it out the frame and back to the starting position. 
Adds a lower z-index than the now current image.
*/

@-webkit-keyframes moveIt {
	0% {
		left:0px;
		
	}
	50% {
		left:700px;
		
	}
	100% { 
		left:-700px;
		z-index: 5;
	}
}

ul#slider li:not(:target) {
	-webkit-animation-name: moveIt; 
  	-webkit-animation-duration: 1.5s; 
  	-webkit-animation-iteration-count: 1;
	top:0px;
	left: 0px;
}

</style>


<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>

<body>

<h1>Pure CSS Sliding Image Gallery - No JS</h1>
<h3>View in Safari or Chrome</h3>
<p>Works well in Firefox and Opera too but no slidey slidey!<br>

</p>

<div id="box">

<ul id="slider">
	<li id="1" >
		<img src="images/grass-bl.jpg" alt="grass-blades" width="700" height="438" />
		<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span></p>
	</li>
	<li id="2">
		<img src="images/ladybug.jpg" alt="ladybug" width="700" height="438" />
		<p><span>Mind your step!</span></p>
	</li>
	<li id="3">
		<img src="images/lotus.jpg" alt="lotus" width="700" height="438" />
		<p><span>This is an image of a big flower!</span></p>
	</li>
	<li id="4">
		<img src="images/stones.jpg" alt="stones" width="700" height="438" />
		<p><span>Damn! Those are some nice looking stones!</span></p>
	</li>
</ul>

<ul id="thumb">
	<li><a href="#1"><img src="images/grass-bl.jpg" alt="grass-blades" width="50" height="50" /></a></li>
	<li><a href="#2"><img src="images/ladybug.jpg" alt="ladybug" width="50" height="50" /></a></li>
	<li><a href="#3"><img src="images/lotus.jpg" alt="lotus" width="50" height="50" /></a></li>
	<li><a href="#4"><img src="images/stones.jpg" alt="stones" width="50" height="50" /></a></li>
</ul>

</div>
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)