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

  • 时间:2018-06-12 19:52 作者:Mation梁 来源:Mation梁 阅读:305
  • 扫一扫,手机访问
摘要:效果图各位长友大家早上好!今天给各位带来的是 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)
最新发布的资讯信息
【系统环境|】web前端开发需要学习哪些技术(2019-09-17 18:00)
【系统环境|】学习web前端开发是正确的选择(2019-09-15 16:55)
【系统环境|】干货整理!零基础html5网站开发学习步骤方法(保存不后悔)(2019-09-10 16:27)
【系统环境|】「前端入门」前端基本概念(2019-09-07 21:36)
【系统环境|】小白入门学习web前端,这些干货不能少(2019-09-05 20:59)
【系统环境|】不是计算机专业,哪个专业更适合学习web前端(2019-09-03 20:31)
【系统环境|】入行web前端开发可以做什么工作(2019-09-02 20:51)
【系统环境|】什么是Web前端呢?为什么说web前端开发人员的薪资高、前景好呢?(2019-08-31 20:55)
【系统环境|】2019年Web前端开发的8个趋势,你知道几个?(2019-08-29 16:23)
【系统环境|】学习web前端,掌握这些,才有底气跟面试官提薪资(2019-08-28 15:23)
手机二维码手机访问领取大礼包
返回顶部