jquery css3图片翻转3D动画切换特效代码

maolai web前端评论523阅读模式

jquery css3图片翻转3D动画切换特效代码下载,支持多种动画特效jQuery幻灯片,jquery图片3d翻转效果,jquery3D图片切换演示,css3 3d网页面翻转代码素材

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<title>jquery css3图片翻转3D动画切换特效 - bokequ.com</title>
<link rel="stylesheet" type="text/css" href="http://www.bokequ.com/show/demo1/css/default.css">
<link rel="stylesheet" href="http://www.bokequ.com/show/demo1/css/styles.css">
<!--必要样式-->
<link rel="stylesheet" href="http://www.bokequ.com/show/demo1/css/jcslider.css">
<link rel="stylesheet" href="http://www.bokequ.com/show/demo1/css/animate.min.css">
</head>
<body>
<div class="htmleaf-container">
	<main>
		<section class="example">
			<h2>示例演示1:</h2>
			<!-- Slider start -->
			<ul class="jc-slider">
				<li class="jc-animation">
					<div class="wrap">
						天行九歌卫庄高清壁纸图/天行九歌卫庄超清壁纸
					</div>
				</li>
				<li class="jc-animation">
					<div class="wrap">
					  每盏灯光下都有照不亮的黑影。越繁华的城市越像一座丛林,潮湿*暗的角落里充满了危险的猛兽,随时准备撕碎无辜弱小的猎物,捕食留下一道道血迹,像满脸皱纹看着城市衰老。雨丝中带着熟悉的血腥,这才是属于夜晚的气味。有些人天生就属于深夜,今晚会有人死去,一如既往。
					</div>
				</li>
				<li class="jc-animation">
					<div class="wrap">
					  有的人在浅摊上只能说等死,而有的人确实在等待水落石出,水太深的地方会掩藏太多的真相,只有等潮水退去,才能看清楚那些不为人知的杂草和暗礁。
					</div>
				</li>
			</ul>
			<!-- Slider end -->
			<h2>示例演示 2:</h2>
			<!-- Slider start -->
			<ul class="jc-slider2">
				<li class="jc-animation">
					<img src="http://img.bokequ.com/dongman/005XKz6xgy1foxiagy1k9j31hc0u04qr.jpg" alt="1">
				</li>
				<li class="jc-animation">
					<img src="http://img.bokequ.com/dongman/005XKz6xgy1g4fyvr19frj31hc0u0kjm.jpg" alt="2">
				</li>
				<li class="jc-animation">
					<img src="http://img.bokequ.com/dongman/005XKz6xgy1fpdoeds0bcj31hc0u0u0x.jpg" alt="3">
				</li>
			</ul>
			<!-- Slider end -->
			<h2>示例演示 3:</h2>
			<!-- Slider start -->
			<ul class="jc-slider3">
				<li class="jc-animation">
					<img src="http://img.bokequ.com/dongman/005XKz6xly1fzpjjcbzqhj30q80eoq4z.jpg" alt="1">
				</li>
				<li class="jc-animation">
					<img src="http://img.bokequ.com/dongman/005XKz6xgy1g3sb1se1azj31hc0u0adz.jpg" alt="2">
				</li>
				<li class="jc-animation">
					<img src="http://img.bokequ.com/dongman/005XKz6xgy1fmolsstgvnj31hc0u04qq.jpg" alt="3">
				</li>
			</ul>
			<!-- Slider end -->
			<h2>示例演示 4:</h2>
			<!-- Slider start -->
			<ul class="jc-slider4">
				<li class="jc-animation">
					<img src="http://img.bokequ.com/dongman/005XKz6xgy1fgbgsbike2j31hc0u079c.jpg" alt="1">
				</li>
				<li class="jc-animation">
					<img src="http://img.bokequ.com/dongman/005XKz6xgy1fhpa354gvjj31hc0u0kjl.jpg" alt="2">
				</li>
				<li class="jc-animation">
					<img src="http://img.bokequ.com/dongman/005XKz6xgy1fijefqph3pj31kw1vqaox.jpg" alt="3">
				</li>
			</ul>
			<!-- Slider end -->
		</section>
	</main>
</div>
<script src="http://www.bokequ.com/show/demo1/js/jquery.min.js" type="text/javascript"></script>
<script src="http://www.bokequ.com/show/demo1/js/jquery.jcslider.js" type="text/javascript"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('.jc-slider').jcSlider({
			animationIn: 'bounceInRight',
			animationOut: 'bounceOutLeft',
			stopOnHover: false
		});
 
		$('.jc-slider2').jcSlider({
			animationIn: 'zoomInUp',
			animationOut: 'flipOutX',
			stopOnHover: false
		});
		$('.jc-slider3').jcSlider({
			animationIn: 'flipInX',
			animationOut: 'shake',
			stopOnHover: false
		});
		$('.jc-slider4').jcSlider({
			animationIn: 'zoomIn',
			animationOut: 'zoomOut',
			stopOnHover: false
		});
	});
</script>
</body>
</html>

多种动画特效jQuery幻灯片网页演示地址jquery图片3d翻转效果

 
maolai
  • 本文由 maolai 发表于 2018年7月19日 14:32:31
  • 转载请务必保留本文链接:http://www.bokequ.com/476.html

发表评论