easeljs实现粒子圆点动态背景分布运动效果代码

代码语言:html

所属分类:粒子

代码描述:easeljs实现粒子圆点动态背景分布运动效果代码

代码标签: 圆点 动态 背景 分布 运动 效果

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

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

<head>

  <meta charset="UTF-8">
  


<style>
html, body{
	width:100%; 
	height:100%; 
	padding:0px; 
	margin:0px;
	overflow: hidden;
	background: #191d1e; /* Old browsers */
	background: -moz-linear-gradient(0deg,  #191d1e 50%, #283139 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right bottom, color-stop(50%,#191d1e), color-stop(100%,#283139)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(0deg,  #191d1e 50%,#283139 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(0deg,  #191d1e 50%,#283139 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(0deg,  #191d1e 50%,#283139 100%); /* IE10+ */
	background: linear-gradient(0deg,  #191d1e 50%,#283139 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#191d1e', endColorstr='#283139',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	background-attachment: fixed
}

#projector {
  position: absolute; 
  top: 0px;
  left: 0px;
  width:100%;
  height:100%;
} 

.center-div {
	width:580px;
    height:374px;
    position:absolute;
    left:50%;
    top:50%;
    margin-left: -290px;
    margin-top:  -187px;
}

#preloaderDiv
{
	position:absolute;
	left:50%;
    top:50%;
    margin-left: -27px;
    margin-top:  -27px;
}

#logo{
	opacity:0;
    filter: alpha(opacity=0);
}

#date2014
{
	position:absolute;
	padding-left: 210px;
	padding-top:15px;
	opacity:0;
	top:303px;
	left:0;
    filter: alpha(opacity=0);
}
</style>



</head>

<body >
  <canvas id="projector">Your browser does not support the Canvas element.</canvas>

<script type="text/java.........完整代码请登录后点击上方下载按钮下载查看

网友评论0