js实现漂亮的星空背景


Posted in Javascript onNovember 01, 2019

本文实例为大家分享了js实现漂亮星空背景的具体代码,供大家参考,具体内容如下

html代码:

<div class="stars"></div>

css代码

html, body {
 height: 100%;
 overflow: hidden;
 }

 body {
 width: 100%;
 height:100%;
 background: #000;
 background-size: 100%;
 perspective: 500px;

 }
 .stars {
 position: absolute;
 top: 50%;
 left: 50%;
 width: 4px;
 height:4px;
 -webkit-border-radius:50%;
 -moz-border-radius:50%;
 border-radius:50%;
 animation: fly 2s linear infinite;
 transform-style: preserve-3d;
 }
 .stars:before, .stars:after {
 content: "";
 position: absolute;
 width: inherit;
 height: inherit;
 box-shadow: inherit;
 }
 .stars:before {
 transform: translateZ(-300px);
 opacity: .6;
 }
 .stars:after {
 transform: translateZ(-600px);
 opacity: .4;
 }

 @keyframes fly {
 from {
 transform: translateZ(0px);
 opacity: .6;
 }
 to {
 transform: translateZ(300px);
 opacity: 1;
 }
 }

js代码 

var w = document.documentElement.clientWidth*1.2;
var h = document.documentElement.clientHeight*1.2;
var star = document.getElementsByClassName("stars")[0];
var n = 1000;
 //随机函数
 function randomNum(m, n) {
 return Math.floor(Math.random() * (n - m + 1) + m);
 }
 var str = '';
 for (var i = 0; i < n; i++) {
 var numX = randomNum(-w, w);
 var numY = randomNum(-h, h);
 var color = 'rgb(' + randomNum(0, 255) + ',' + randomNum(0, 255) + ',' + randomNum(0, 255) + ')';
 str += numX +'px'+' ' + numY+'px'+' '+ color+',';
 }
 str = str.slice(0,-1);
 star.style.boxShadow = str;


  $(function(){

   $('#main').fadeOut();

   $('#main').fadeIn('slow');

 })

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery怎样实现ajax联动框(一)
Mar 08 Javascript
js过滤HTML标签以及空格的思路及代码
May 24 Javascript
js jquery ajax的几种用法总结(及优缺点介绍)
Jan 28 Javascript
node.js实现逐行读取文件内容的代码
Jun 27 Javascript
2014 年最热门的21款JavaScript框架推荐
Dec 25 Javascript
jquery中checkbox全选失效的解决方法
Dec 26 Javascript
js树插件zTree获取所有选中节点数据的方法
Jan 28 Javascript
jquery实现弹出层效果实例
May 19 Javascript
JS/Jquery判断对象为空的方法
Jun 11 Javascript
AngularJS基础 ng-model 指令详解及示例代码
Aug 02 Javascript
js手机号4位显示空格,银行卡每4位显示空格效果
Mar 23 Javascript
详解Node.js中的Async和Await函数
Feb 22 Javascript
Vue实现push数组并删除的例子
Nov 01 #Javascript
vue实现跳转接口push 转场动画示例
Nov 01 #Javascript
JS实现动态星空背景效果
Nov 01 #Javascript
jQuery高级编程之js对象、json与ajax用法实例分析
Nov 01 #jQuery
vue 中固定导航栏的实例代码
Nov 01 #Javascript
vue中beforeRouteLeave实现页面回退不刷新的示例代码
Nov 01 #Javascript
vue自定义switch开关组件,实现样式可自行更改
Nov 01 #Javascript
You might like
PHP配置文件中最常用四个ini函数
2007/03/19 PHP
Win2003服务器安全加固设置--进一步提高服务器安全性
2007/05/23 PHP
PHP HTML代码串 截取实现代码
2009/06/29 PHP
一个简单php扩展介绍与开发教程
2010/08/19 PHP
ThinkPHP3.1新特性之命名范围的使用
2014/06/19 PHP
PHP中的插件机制原理和实例
2014/07/08 PHP
PHP微信刮刮卡 附微信接口
2016/07/22 PHP
简单谈谈PHP中的trait
2017/02/25 PHP
详解php中生成标准uuid(guid)的方法
2019/04/28 PHP
javascript模拟枚举的简单实例
2014/03/06 Javascript
JS实现带鼠标效果的头像及文章列表代码
2015/09/27 Javascript
javascript实现拖动元素交换位置
2015/11/29 Javascript
JS密码生成与强度检测完整实例(附demo源码下载)
2016/04/06 Javascript
使用jQuery制作遮罩层弹出效果的极简实例分享
2016/05/12 Javascript
Bootstrap布局之栅格系统详解
2016/06/13 Javascript
AngularJS 过滤器的简单实例
2016/07/27 Javascript
关于数据与后端进行交流匹配(点亮星星)
2016/08/03 Javascript
Angular之toDoList的实现代码示例
2017/12/02 Javascript
js 取消页面可以选中文字的功能方法
2018/01/02 Javascript
Vue利用canvas实现移动端手写板的方法
2018/05/03 Javascript
AngularJS自定义过滤器用法经典实例总结
2018/05/17 Javascript
JavaScript中构造函数与原型链之间的关系详解
2019/02/25 Javascript
python模块之paramiko实例代码
2018/01/31 Python
浅谈django的render函数的参数问题
2018/10/16 Python
python 生成图形验证码的方法示例
2018/11/11 Python
python3.4爬虫demo
2019/01/22 Python
Python面向对象之继承原理与用法案例分析
2019/12/31 Python
python datetime时间格式的相互转换问题
2020/06/11 Python
python re的findall和finditer的区别详解
2020/11/15 Python
优秀毕业生自我鉴定
2014/01/19 职场文书
纺织工程专业个人求职信范文
2014/01/27 职场文书
2014年招生工作总结
2014/11/26 职场文书
2014年物资管理工作总结
2014/12/02 职场文书
创业方案:赚钱的烧烤店该怎样做?
2019/07/05 职场文书
详解Vue slot插槽
2021/11/20 Vue.js
Mysql事务索引知识汇总
2022/03/17 MySQL