HTML5创意图文幻灯片切换特效代码下载


HTML5创意图文幻灯片切换特效代码下载
HTML5创意图文幻灯片切换特效代码下载以及创意图文、幻灯片切换等js/jquery网页特效代码下载。

1. 引入CSS

<link rel="stylesheet" href="css/style.css">

2. 引入JS

<script src="js/gsap-latest-beta.min.js"></script>
<script src="js/CSSRulePlugin3.min.js"></script>
<script src="js/script.js"></script>

3. HTML代码

<div class="container"> 
	<div class="slider">
		<div class="box1 box">
			<div class="bg"></div>
			<div class="details">
				<h1>I'm the first Box</h1>
				<p>
					Lorem ipsum dolor sit amet, consectetur adipiscing 
					elit. Integer lacinia dui lectus. Donec scelerisque ipsum
					diam, ac mattis orci pellentesque eget. 
				</p>
				<button>Check Now</button>
			</div>
			<div class="illustration"><div class="inner"></div></div>
		</div>
		<div class="box2 box">
			<div class="bg"></div>
			<div class="details">
				<h1>I'm the second Box</h1>
				<p>
					Lorem ipsum dolor sit amet, consectetur adipiscing 
					elit. Integer lacinia dui lectus. Donec scelerisque ipsum
					diam, ac mattis orci pellentesque eget. 
				</p>
				<button>Check Now</button>
			</div>
			<div class="illustration"><div class="inner"></div></div>
		</div>
		<div class="box3 box">
			<div class="bg"></div>
			<div class="details">
				<h1>I'm the third Box</h1>
				<p>
					Lorem ipsum dolor sit amet, consectetur adipiscing 
					elit. Integer lacinia dui lectus. Donec scelerisque ipsum
					diam, ac mattis orci pellentesque eget. 
				</p>
				<button>Check Now</button>
			</div>
			<div class="illustration"><div class="inner"></div></div>
		</div>
		<div class="box4 box">
			<div class="bg"></div>
			<div class="details">
				<h1>I'm the fourth Box</h1>
				<p>
					Lorem ipsum dolor sit amet, consectetur adipiscing 
					elit. Integer lacinia dui lectus. Donec scelerisque ipsum
					diam, ac mattis orci pellentesque eget. 
				</p>
				<button>Check Now</button>
			</div>
			<div class="illustration"><div class="inner"></div></div>
		</div>
		<div class="box5 box">
			<div class="bg"></div>
			<div class="details">
				<h1>I'm the fifth Box</h1>
				<p>
					Lorem ipsum dolor sit amet, consectetur adipiscing 
					elit. Integer lacinia dui lectus. Donec scelerisque ipsum
					diam, ac mattis orci pellentesque eget. 
				</p>
				<button>Check Now</button>
			</div>
			<div class="illustration"><div class="inner"></div></div>
		</div>
	</div>
	<svg xmlns="http://www.w3.org/2000/svg" class="prev" width="56.898" height="91" viewBox="0 0 56.898 91"><path d="M45.5,0,91,56.9,48.452,24.068,0,56.9Z" transform="translate(0 91) rotate(-90)" fill="#fff"></svg>
	<svg xmlns="http://www.w3.org/2000/svg" class="next" width="56.898" height="91" viewBox="0 0 56.898 91"><path d="M45.5,0,91,56.9,48.452,24.068,0,56.9Z" transform="translate(56.898) rotate(90)" fill="#fff"></svg>
	<div class="trail">
			<div class="box1 active">1</div>
			<div class="box2">2</div>
			<div class="box3">3</div>
			<div class="box4">4</div>
			<div class="box5">5</div>
	</div>
</div>   
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>

相关推荐

发表评论

相关文章