<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Fluid CSS3 Slideshow with Parallax Effect</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Fluid CSS3 Slideshow with Parallax Effect" />
<meta name="keywords" content="fluid, css3, css-only, slideshow, responsive, parallax, sibling, pseudo-class, transitions" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/modernizr.custom.04022.js"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
<script type="text/javascript" src="js/selectivizr-min.js"></script>
<![endif]-->
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300,300italic' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="container">
<!-- Codrops top bar -->
<div class="codrops-top">
<a href="http://tympanus.net/Development/AudioSlideshow/">
<strong>« Previous Demo: </strong>Audio Slideshow with jPlayer
</a>
<span class="right">
<a href="http://wegraphics.net/downloads/free-vector-infographic-kit/">Infographic Elements from WeGraphics</a>
<a href="http://5milli.deviantart.com/art/Global-Map-Vector-100880703">Global Map Vector from 5Milli</a>
<a href="http://tympanus.net/codrops/2012/04/30/fluid-css3-slideshow-with-parallax-effect/">
<strong>Back to the Codrops Article</strong>
</a>
</span>
<div class="clr"></div>
</div><!--/ Codrops top bar -->
<header>
<h1>Fluid CSS3 Slideshow <span>with Parallax Effect</span></h1>
<h2>A CSS-only slideshow with some background parallax effect</h2>
</header>
<div class="sp-slideshow">
<input id="button-1" type="radio" name="radio-set" class="sp-selector-1" checked="checked" />
<label for="button-1" class="button-label-1"></label>
<input id="button-2" type="radio" name="radio-set" class="sp-selector-2" />
<label for="button-2" class="button-label-2"></label>
<input id="button-3" type="radio" name="radio-set" class="sp-selector-3" />
<label for="button-3" class="button-label-3"></label>
<input id="button-4" type="radio" name="radio-set" class="sp-selector-4" />
<label for="button-4" class="button-label-4"></label>
<input id="button-5" type="radio" name="radio-set" class="sp-selector-5" />
<label for="button-5" class="button-label-5"></label>
<label for="button-1" class="sp-arrow sp-a1"></label>
<label for="button-2" class="sp-arrow sp-a2"></label>
<label for="button-3" class="sp-arrow sp-a3"></label>
<label for="button-4" class="sp-arrow sp-a4"></label>
<label for="button-5" class="sp-arrow sp-a5"></label>
<div class="sp-content">
<div class="sp-parallax-bg"></div>
<ul class="sp-slider clearfix">
<li><img src="images/image1.png" alt="image01" /></li>
<li><img src="images/image2.png" alt="image02" /></li>
<li><img src="images/image3.png" alt="image03" /></li>
<li><img src="images/image4.png" alt="image04" /></li>
<li><img src="images/image5.png" alt="image05" /></li>
</ul>
</div><!-- sp-content -->
</div><!-- sp-slideshow -->
<p class="note">Placeholder text from <a href="http://hipsteripsum.me">http://hipsteripsum.me</a></p>
</div>
</body>
</html>
CSS3背景图滑动视差效果幻灯片.zip
版权申诉
106 浏览量
2022-11-16
21:21:20
上传
评论
收藏 369KB ZIP 举报
CSS3背景图滑动视差效果幻灯片.zip （16个子文件） 
CSS3背景图滑动视差效果幻灯片 FluidParallaxSlideshow css 
demo.css 3KB style.css 7KB normalize.css 9KB images 
image2.png 22KB image3.png 37KB grid.png 166B image4.png 20KB map.png 41KB image1.png 54KB
AttributionImages.html 361B arrows.png 1KB
bg.jpg 25KB image5.png 36KB index.html 4KB js modernizr.custom.04022.js 7KB CSS3背景图滑动视差效果幻灯片.jpg 129KB资源评论
