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 相关文章推荐
js 禁用浏览器的后退功能的简单方法
Dec 10 Javascript
LABjs、RequireJS、SeaJS的区别
Mar 04 Javascript
JS对img标签进行优化使用onerror显示默认图像
Apr 24 Javascript
JavaScript常用本地对象小结
Mar 28 Javascript
Bootstrap所支持的表单控件实例详解
May 16 Javascript
Jquery表单验证失败后不提交的解决方法
Oct 18 Javascript
node.js缺少mysql模块运行报错的解决方法
Nov 13 Javascript
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 jQuery
JavaScript中变量、指针和引用功能与操作示例
Aug 04 Javascript
详解使用mocha对webpack打包的项目进行&quot;冒烟测试&quot;的大致流程
Apr 27 Javascript
如何通过vscode运行调试javascript代码
Jul 24 Javascript
vue-cli3访问public文件夹静态资源报错的解决方式
Sep 02 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 eval函数用法总结
2012/10/31 PHP
Mysql的Root密码忘记,查看或修改的解决方法(图文介绍)
2013/06/14 PHP
深入php内核之php in array
2015/11/10 PHP
yii2.0数据库迁移教程【多个数据库同时同步数据】
2016/10/08 PHP
浅析PHP反序列化中过滤函数使用不当导致的对象注入问题
2020/02/15 PHP
TP5框架页面跳转样式操作示例
2020/04/05 PHP
PHP中的输出echo、print、printf、sprintf、print_r和var_dump的示例代码
2020/12/01 PHP
轻松创建nodejs服务器(5):事件处理程序
2014/12/18 NodeJs
jquery+ajax请求且带返回值的代码
2015/08/12 Javascript
JS弹出对话框实现方法(三种方式)
2015/12/18 Javascript
JavaScript中获取HTML元素值的三种方法
2016/06/20 Javascript
element-ui 的el-button组件中添加自定义颜色和图标的实现方法
2018/10/26 Javascript
浅谈Vue3.0新版API之composition-api入坑指南
2020/04/30 Javascript
详解Typescript 内置的模块导入兼容方式
2020/05/31 Javascript
python完成FizzBuzzWhizz问题(拉勾网面试题)示例
2014/05/05 Python
Python函数嵌套实例
2014/09/23 Python
在Django的URLconf中使用多个视图前缀的方法
2015/07/18 Python
Python实现网站注册验证码生成类
2017/06/08 Python
Python学习之用pygal画世界地图实例
2017/12/07 Python
python 处理string到hex脚本的方法
2018/10/26 Python
Python3数字求和的实例
2019/02/19 Python
pandas的qcut()方法详解
2019/07/06 Python
pytorch .detach() .detach_() 和 .data用于切断反向传播的实现
2019/12/27 Python
Python基础之字符串常见操作经典实例详解
2020/02/26 Python
Python实现Excel自动分组合并单元格
2021/02/22 Python
简洁自适应404页面HTML好看的404源码
2020/12/16 HTML / CSS
我们在web应用开发过程中经常遇到输出某种编码的字符,如iso8859-1等,如何输出一个某种编码的字符串?
2014/03/30 面试题
学生档案自我鉴定
2013/10/07 职场文书
质检部职责
2013/12/28 职场文书
环保专项行动方案
2014/05/12 职场文书
环卫工人先进事迹材料
2014/06/02 职场文书
2015年工商所工作总结
2015/05/21 职场文书
导游词之凤凰古城
2019/10/22 职场文书
HTML5简单实现添加背景音乐的几种方法
2021/05/12 HTML / CSS
如何创建一个创建MySQL数据库中的datetime类型
2022/03/21 MySQL
HTML中实现音乐或视频自动播放案例详解
2022/05/30 HTML / CSS