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

  • 时间:2018-06-12 19:52 作者:Mation梁 来源:Mation梁 阅读:238
  • 扫一扫,手机访问
摘要:效果图各位长友大家早上好!今天给各位带来的是 HTML5+JS全屏星空特效源码!有想要文件版源码的能私聊小编哦!废话不多说,上源码!CSS:body {margin:0 auto;overflow:hidden;} /*=============第一页=============*/.header{m

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;

}

  • 全部评论(0)
最新发布的资讯信息
【系统环境|】Hadoop环境中管理大数据存储八大技巧(2019-06-15 11:01)
【系统环境|服务器应用】现在国内IT行业是不是程序员过多了?(2019-06-11 06:34)
【系统环境|服务器应用】新贵 Flutter(2) 自己设置 Widget(2019-06-11 06:34)
【系统环境|服务器应用】Android完整知识体系路线(菜鸟-资深-大牛必进之路)(2019-06-11 06:34)
【系统环境|服务器应用】Java程序员小伙经历三个月备战,终获阿里offer(2019-06-11 06:34)
【系统环境|服务器应用】每日一问:谈谈对 MeasureSpec 的了解(2019-06-11 06:34)
【系统环境|服务器应用】【科普】晶体管-1(2019-06-11 06:34)
【系统环境|服务器应用】一个很多人都会答错的java基础题(2019-06-11 06:33)
【系统环境|服务器应用】深入了解枚举类型(2019-06-11 06:33)
【系统环境|服务器应用】JavaScript编译原理与内存管理(2019-06-11 06:33)
手机二维码手机访问领取大礼包
返回顶部