js实现漂亮的星空背景

2024-12-07 11:38:15

本文实例为大家分享了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');

 })

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

使用3D引擎threeJS实现星空粒子移动效果

three.js是JavaScript编写的WebGL第三方库.提供了非常多的3D显示功能.Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包括了摄影机.光影.材质等各种对象. 下载地址: http://threejs.org/ 首先创建一个HTML文件,引入three.js引擎包. <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <titl
js星空效果代码

星空效果_www.jb51.net ABCD [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
js canvas实现星空连线背景特效

本文实例为大家分享了js canvas星空连线背景的具体代码,供大家参考,具体内容如下 <html> <head> <meta charset="UTF-8"> <title>canvas星空连线背景特效</title> <style type="text/css"> body{ margin: 0; } #canvas{ display: block; background: #000; ma
JS+canvas画布实现炫酷的旋转星空效果示例

本文实例讲述了JS+canvas画布实现炫酷的旋转星空效果.分享给大家供大家参考,具体如下: canvas是html5的新标签,其画布功能尤为强大.当然了canvas在IE10以下浏览器是不兼容的,所以呢为了特效肯定是牺牲一定的兼容性.这里呢,分享一个基于canvas开发的浩瀚星河插件,其实这个源代码是网上下载的,我把它整合了一下,重新封装一些参数提供更多的可改项. 首先引入两个javascript脚本,一个是jquery插件,另一个是封装好的cosmos_canvas.js <script s
js实现旋转的星空效果

本文实例为大家分享了js实现旋转的星空效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta nam
js实现宇宙星空背景效果的方法

本文实例讲述了js实现宇宙星空背景效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//h2D XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/h2D/xhtml1-transitional.h2d"> <html xmlns="http://www.w3.org/1999/xhtml&qu
JS实现动态星空背景效果

本文实例为大家分享了JS实现动态星空背景的具体代码,供大家参考,具体内容如下这里我截取的是一个图片,实际上是会动的.废话不多说,上代码. HTML: <canvas id="canvas"></canvas> CSS: /*css reset */ body,p,div,ol,ul,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,input,iframe,nav { margin: 0; padding: 0; } html,body {
js实现漂亮的星空背景

本文实例为大家分享了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 { po
JS实现漂亮的淡蓝色滑动门效果代码

本文实例讲述了JS实现漂亮的淡蓝色滑动门效果.分享给大家供大家参考.具体如下: 这款漂亮淡蓝色滑动门代码,感觉很不错哦. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-blue-hdm-menu-demo-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml
JS实现漂亮的时间选择框效果

本文实例讲述了JS实现漂亮的时间选择框效果.分享给大家供大家参考,具体如下: HTML代码部分: <html> <script language=javascript src="dataone.js"></script> <table align="center"> <tr> <td> <body> (1)只选择日期 <input type="text" n
js实现的简单radio背景颜色选择器代码

本文实例讲述了js实现的简单radio背景颜色选择器.分享给大家供大家参考.具体如下: 这里演示的js实现radio网页背景颜色选择器,只需点击对应颜色的radio单选框,就可以改变网页的背景颜色,简单方便,实用的javaScript网页特效. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/js-radio-cha-bgcolor-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT
js实现网页随机切换背景图片的方法

本文实例讲述了js实现网页随机切换背景图片的方法.分享给大家供大家参考.具体实现方法如下: 首先要准备一些图像,图像的大小(无论是尺寸大小还是数据大小)要控制好,如果太大,会使用户等不及查看全图就跳出了,如果太小,又会影响页面质量在script中将这些图像编为一个数组,便于调用.数组的长度当然就是图像的数量. 复制代码代码如下: var bodyBgs = []; //创建一个数组变量来存储背景图片的路径 bodyBgs[0] = "images/01.jpg"; bodyB
JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)

本文实例讲述了JS实现漂亮的窗口拖拽效果.分享给大家供大家参考.具体如下: 这是一款漂亮的JS窗口拖拽效果(改变大小/最小化/最大化/还原/关闭) 特点: ① 窗口可以拖动: ② 窗口可以通过八个方向改变大小: ③ 窗口可以最小化.最大化.还原.关闭: ④ 限制窗口最小宽度/高度. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-win-drug-cha-close-demo/ 具体代码如下: <!DOCTYPE html PUBLIC &qu
html+vue.js 实现漂亮分页功能可兼容IE

当功能比较简单,在单一html中使用vue.js分页展示数据,并未安装脚手架,或使用相关UI框架,此时需要手写一个分页器,不失为最合理最便捷的解决方案先看一下实现效果: 上代码: 1.简单搞一搞 CSS,此处代码有折叠 2.简单搞一搞 HTML <div id="app" v-cloak @click="showOption=false"> 第{{pageIndex}}页, 每页显示{{pageSize}}条 <div v-show="
js超漂亮的鼠标提示，带人性化缺口

鼠标提示符 * { padding: 0; margin: 0; } li { } body { background: #fdf7f7; } #explain { height: 60px; border-bottom: 1px solid #999999; background: #eee; font-size: 14px; color: #666; text-align: center; line-height: 60px; } #explain a { color: #990000; f
js导航栏单击事件背景变换示例代码

如下所示; 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv=

js实现漂亮的星空背景

相关推荐

随机推荐