利用CSS3实现背景图滑动视差效果幻灯片



10 39 14



特效描述:利用CSS3实现 背景图滑动 视差效果 幻灯片,利用CSS3实现背景图滑动视差效果幻灯片

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300,300italic' rel='stylesheet' type='text/css'>

2. 引入JS

<script type="text/javascript" src="js/modernizr.custom.04022.js"></script>
<script type="text/javascript" src="js/selectivizr-min.js"></script>

3. HTML代码

        <div class="container">
			<!-- Codrops top bar -->
            <div class="codrops-top">
                <a href="http://tympanus.net/Development/AudioSlideshow/">
                    <strong>&laquo; 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://www.51qianduan.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>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滑动 滑块 滑动门 触屏滑动 滑动插件 滑块插件 切换按钮 表单 表单美化 表单插件 表单美化插件 图片滑动 图片滑块 按钮控制
×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到