html5 svg格式图片动画按钮控制弹性摇晃的页面切换特效



89 354 119



特效描述:html5 svg格式图片 动画按钮控制 弹性摇晃 页面切换特效,弹性摇晃的页面切换特效

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/slideshow.css" />

2. 引入JS

<script src="js/snap.svg-min.js"></script>
<script src="js/modernizr.custom.js"></script>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script type="text/javascript" src="js/classie.js"></script>
<script type="text/javascript" src="js/sliderFx.js"></script>

3. HTML代码

<div class="container">
	<div id="slideshow" class="slideshow">
		<ul>
			<li>
				<div class="slide">
					<img class="icon" src="img/icons/browser.svg" alt="Browser Icon"/>
					<h1>摇摇晃晃的幻灯片效果</h1>
				</div>
			</li>
			<li>
				<div class="slide">
					<img class="icon" src="img/icons/heart.svg" alt="Heart Icon"/>
					<blockquote>
						<p>不要害怕争吵,但寻求危险的冒险。</p>
					</blockquote>
					<p>大仲马(法国作家)</p>
				</div>
			</li>
			<li>
				<div class="slide">
					<img class="icon" src="img/icons/letter.svg" alt="Letter Icon"/>
					<blockquote>
						<p>如果你不知道你要去哪里,任何道路都将让你在那里。</p>
					</blockquote>
					<p>路易斯·卡罗尔(英国作家)</p>
				</div>
			</li>
			<li>
				<div class="slide">
					<img class="icon" src="img/icons/football.svg" alt="Football Icon"/>
					<blockquote>
						<p>拖延是跟上昨天的艺术。</p>
					</blockquote>
					<p>唐·马奎斯</p>
				</div>
			</li>
			<li>
				<div class="slide">
					<img class="icon" src="img/icons/match.svg" alt="Match Icon"/>
					<blockquote>
						<p>我是一个理想主义者。我不知道我去哪里,但是我马上就来。</blockquote>
					<p>桑德堡</p>
				</div>
			</li>
			<li>
				<div class="slide">
					<img class="icon" src="img/icons/watch.svg" alt="Watch Icon"/>
					<blockquote>
						<p>我拒绝加入任何俱乐部,我是一个成员。</blockquote>
					<p>格劳乔·马克斯</p>
				</div>
			</li>
			<li>
				<div class="slide">
					<div class="related">
						<p>如果你喜欢这个演示你可能也喜欢:</p>
					</div>
				</div>
			</li>
		</ul>
	</div>
</div><!-- /container -->
<script type="text/javascript">
(function(){
	new SliderFx( document.getElementById('slideshow'), {
		easing : 'cubic-bezier(.8,0,.2,1)'
	});
})();
</script>



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


热门标签: 加载动画 滚动切换 滚动条切换 滑动选项卡 滑动切换 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 h5弹窗动画 html5弹窗动画 切换按钮 h5动画 h5背景动画 h5场景动画 h53D动画 h5界面动画 html5动画 表单 表单美化 表单插件 表单美化插件 h5按钮动画 html5按钮动画 h5图片动画 h5图标动画 html5图片动画 html5图标动画 图片切换 图片选项卡 图标选项卡 按钮控制

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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