1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 前端页面漂亮的星空背景 ---js效果

前端页面漂亮的星空背景 ---js效果

时间:2024-07-21 18:23:26

相关推荐

前端页面漂亮的星空背景 ---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');})

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。