js实现图形文字粒子变换过渡效果代码-html代码-BFW代码库

js实现图形文字粒子变换过渡效果代码

代码语言：html

所属分类：粒子

代码描述：js实现图形文字粒子变换过渡效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en" class="no-js">

	<head>

		<meta charset="UTF-8" />

		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 

		<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/modernizr-2.js"></script>
<style>
    .ip-slideshow-wrapper,
.ip-slideshow {
	position: relative;
	background: #f1c40f;
	width: 100%;
	height: 500px;
	overflow: hidden;
}

.ip-nav-left,
.ip-nav-right {		
	width: 80px;
	height: 80px;
	top: 50%;
	margin-top: -40px;
	z-index: 100;		
	position: absolute;
	border: 6px solid #fff;
	border-radius: 50%;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;				
}
			
.ip-nav-left {
	left: 20px;
	-webkit-transform: translateX(-100%);
	-moz-transform: translateX(-100%);
	transform: translateX(-100%);
	opacity: 0;
}
				
.ip-nav-right {
	right: 20px;
	-webkit-transform: translateX(100%);
	-moz-transform: translateX(100%);
	transform: translateX(100%);
	opacity: 0;
}

.ip-nav-left:hover, 
.ip-nav-right:hover {		
	background-color: rgb(255, 165, 0);
	cursor: pointer;
}

.ip-nav-left:after,
.ip-nav-right:after {
	width: 100%;
	height: 100%;
	color: #fff;
	font-family: 'Lato', sans-serif;		
	font-size: 70px;
	line-height: 62px;
	text-align: center;
	position: absolute;
	top: 0;
	left: 0;
}
				
.ip-nav-left:after {		
	content: '<';						
}
				
.ip-nav-right:after {		
	content: '>';
}
	
.ip-nav-show {			
	-webkit-transform: translateX(0%);
	-moz-transform: translateX(0%);
	transform: translateX(0%);
	opacity: 1;			
}
</style>

	</head>

	<body>

		<di.........完整代码请登录后点击上方下载按钮下载查看