HTML5特效库 HTML5+JS全屏星空特效模板

2019-09-08 郑州网站建设  

HTML5特效库 HTML5+JS全屏星空特效模板

效果图

各位长友大家早上好!

今天给各位带来的是 HTML5+JS全屏星空特效模板!

有想要文件版模板的可以私聊小编哦!

废话不多说,上模板!

CSS:

body {margin:0 auto;overflow:hidden;}

/*=============第一页=============*/

.header{

margin:0 auto;

width:100%;

height:640px;

background-color:#000;

position:relative;

}

.header canvas {

width:100%;height:auto/*默认全屏显示 可自己设置高度640px*/;

display:inline-block;vertical-align:baseline

position:absolute;

z-index:-1;

}

.header .canvaszz{ /*用来解决视频右键菜单,用于视频上面的遮罩层*/

width:100%;

background-image: url(img/in_top_bj.jpg);

height:640px;

position:absolute;

z-index:10;

filter:alpha(opacity=40);

-moz-opacity:0.4;

-khtml-opacity: 0.4;

opacity: 0.4;

}

.audio{

/*设置音乐显示位置*/

width:45px;

position:fixed;top:65px;left:94%;

z-index:100;

filter:alpha(opacity=30);

-moz-opacity:0.3;

-khtml-opacity: 0.3;

opacity: 0.3;

}

.header .top_标志{

background-image: url(img/top_标志.png);

margin:0 auto;

width:750px;

height:200px;

position:absolute;

z-index:30;

top:10px;

left: 50%;

margin-left: -390px;

}

.header .nav{

width:804px;

height:auto;

position:absolute;

z-index:30;

top:420px;

left: 50%;

margin-left: -400px;

}

.header .nav a.gv {

text-decoration:none;

background:url(img/nav_gv.png) repeat 0px 0px;

width: 130px;

height: 43px;

display: block;

text-align:center;/*水平居中*/

line-height:43px; /*上下居中*/

cursor:pointer;

float:left;/*左浮动*/

margin:8px 2px 8px 2px;

font:18px/43px 'microsoft yahei'; color:#066197;

}

.header .nav a.gv span {

display: none;

}

.header .nav a.gv:hover {

background: url(img/nav_gv.png) repeat 0px -43px;

color:#1d7eb8;

-webkit-box-shadow: 0 0 6px #1d7eb8;

transition-duration: 0.5s;

}

.header.topcn{

width: 980px;

top:200px;

left: 50%;

margin-left: -490px;


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/1279.html转载请标明出处,谢谢合作!
标签:
  • HTML5
  • Ч
  • +
  • 效果图
  • JS
  • 各位