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>

		<div class="container">



			<div class="ip-slideshow-wrapper">

				<nav>

					<span class="ip-nav-left"></span>

					<span class="ip-nav-right"></span>

				</nav>

				<div class="ip-slideshow"></div>

			</div>

		</div><!-- /container -->

<script>
    /*
 * Copyright MIT © <2013> <Francesco Trillini>
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated 
 * documentation files (the "Software"), to deal in the Software without restriction, including without limitation 
 * the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and 
 * to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, 
 * INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR 
 * PURPOSE A.........完整代码请登录后点击上方下载按钮下载查看