jquery.parallax+particles实现粒子悬浮视觉差异效果代码-html代码-BFW代码库

jquery.parallax+particles实现粒子悬浮视觉差异效果代码

代码语言：html

代码描述：jquery.parallax+particles实现粒子悬浮视觉差异效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        @import url(https://fonts.googleapis.com/css?family=Lato:400,300,100);
        	body {
        	font-family:"Lato";
        	background:#2980b9;
        	overflow:hidden;
        	height:100%;
        	width:100%;
        	-webkit-font-smoothing:antialiased;
        	-webkit-user-select:none;
        	-moz-user-select:none;
        	-ms-user-select:none;
        	user-select:none
        }
        #particles-js,#parallax,.layer,.some-space,.some-more-space {
        	height:100%;
        	position:absolute;
        	width:100%
        }
        #particles-js {
        	opacity:.6
        }
        h1 {
        	color:white;
        	font-size:5em;
        	font-weight:100;
        	letter-spacing:.2em;
        	position:absolute;
        	top:50%;
        	left:50%;
        	transform:translate3d(-50%,-50%,0)
        }
        a {
        	color:white;
        	border:1px solid white;
        	display:table;
        	position:absolute;
        	top:60%;
        	left:50%;
        	letter-spacing:.05em;
        	transform:translate3d(-50%,-50%,0);
        	text-decoration:none;
        	transition:all 200ms ease;
        	padding:10px 15px
        }
        a:hover {
        	background:white;
        	color:black
        }
        .some-space {
        	animation:rotate 18s .5s infinite linear reverse
        }
        .some-more-space {
        	-webkit-animation:rotate 15s .1s infinite linear;
        	animation:rotate 15s .1s infinite linear
        }
        @-webkit-keyframes rotate {
        	0% {
        	transform:rotateZ(0deg) translate3d(0,1.5%,0) rotateZ(0deg)
        }
        100% {
        	transform:rotateZ(360deg) translate3d(0,1.5%,0) rotateZ(-360deg)
        }
        }@keyframes rotate {
        	0% {
        	transform:rotateZ(0deg) translate3d(0,1.5%,0) rotateZ(0deg)
        }
        100% {
        	transform:rotateZ(360deg) translate3d(0,1.5%,0) rotateZ(-360deg)
        }
        }
    </style>
</head>

<body>

    <div id="parallax">
        <div class="layer" data-depth="0.6">
            <div class="some-space">
                <h1>PARALLAX</h1>
            </div>
        </div>
        <div class="layer" data-depth="0.4">
            <div id="particles-js"></div>
        </div>
        <div class="layer" data-depth="0.3">
            <div class="some-more-space"><a >Cool ?</a></div>
        </div>
    </div>
    <!-- partial -->
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.17.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/particles.2.0.0.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.parallax.js"></script>
    <script>
        $("#parallax").parallax({
         invertX: true,
         invertY: t.........完整代码请登录后点击上方下载按钮下载查看