HTML5特效库 HTML5+JS全屏星空特效源码

作者 : 开心源码 本文共1525个字,预计阅读时间需要4分钟 发布时间: 2022-05-11 共101人阅读

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_logo{

background-image: url(img/top_logo.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;

position:absolute;

z-index:20;

}

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » HTML5特效库 HTML5+JS全屏星空特效源码

发表回复