JS框架_(JQuery.js)夜晚天空满天星星闪烁动画

百度云盘　　传送门　　密码:xftr

满天星星闪烁动画效果：

(可用星空动画来作为页面背景，白色文字改为文章或者其他的O(∩_∩)O)

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>jQuery夜晚天空满天星星闪烁动画</title>

<script src="js/jquery.min.js"></script>

<style>

* {

  box-sizing: border-box;

  padding: 0;

  margin: 0;

}

body {

  background: #22313f;

}

#starsBox {

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: rgba(0, 0, 0, 0.75);

  opacity: .5;

}

#starsBox span {

  display: inline-block;

  width: auto;

  position: absolute;

  border-radius: 100%;

  transition: 100s linear;

}

p {

  position: fixed;

  top: 50%;

  left: 0;

  right: 0;

  text-align: center;

  transform: translateY(-50%);

  font-size: 40px;

  font-weight: 900;

  color: white;

  text-shadow: 0 0 50px black;

  text-transform: capitalize;

  font-family: 'Roboto','Helvetica','Arial',sans-serif;

  letter-spacing: 5px;

}

p > span {

  display: block;

  font-size: 12px;

  color: #bdc3c7;

  margin-top: 30px;

  font-weight: 100;

  text-shadow: 0 0 50px black;

  letter-spacing: 3px;

}

p > span > a {

  font-weight: 700;

  text-decoration: none;

  color: #d64541;

  padding-bottom: 2px;

  border-bottom: 0px solid #d64541;

  transition: 0.5s;

}

p > span > a:hover {

  padding-bottom: 5px;

  border-bottom: 2px solid #d64541;

}

</style>

</head>

<body>

<div id="starsBox"></div>

<p>Gary</p>

<script type="text/javascript">

var cols = ['#f5d76e','#f7ca18','#f4d03f','#ececec','#ecf0f1','#a2ded0'];

var stars = 250;

for (var i = 0; i <= stars; i++) {

    var size = Math.random()*3;

  var color = cols[parseInt(Math.random()*4)];

    $('#starsBox').prepend('<span style=" width: ' + size + 'px; height: ' + size + 'px; top: ' + Math.random()*100 + '%; left: ' + Math.random()*100 + '%; background: ' + color + '; box-shadow: 0 0 '+ Math.random()*10 +'px' + color + ';"></span>') ;

};

setTimeout(function(){

    $('#starsBox span').each(function(){

         $(this).css('top', Math.random()*100 + '%').css('left', Math.random()*100 + '%');

  });

}, 1);

setInterval(function(){

    $('#starsBox span').each(function(){

         $(this).css('top', Math.random()*100 + '%').css('left', Math.random()*100 + '%');

  });

}, 100000);

</script>

</body>

</html>

index.html

text-transform属性，可以轻易地实现英文字母大小写转换

　　capitalize; 单词首个字母大写

　　uppercase; 全部大写

　　lowercase; 全部小写

实现过程

Math.random()是令系统随机选取大于等于0.0且小于1.0的伪随机double值

<script type="text/javascript">

var cols = ['#f5d76e','#f7ca18','#f4d03f','#ececec','#ecf0f1','#a2ded0'];

var stars = 250;

for (var i = 0; i <= stars; i++) {

    var size = Math.random()*3;

  var color = cols[parseInt(Math.random()*4)];

    $('#starsBox').prepend('<span style=" width: ' + size + 'px; height: ' + size + 'px; top: ' + Math.random()*100 + '%; left: ' + Math.random()*100 + '%; background: ' + color + '; box-shadow: 0 0 '+ Math.random()*10 +'px' + color + ';"></span>') ;

};

setTimeout(function(){

    $('#starsBox span').each(function(){

         $(this).css('top', Math.random()*100 + '%').css('left', Math.random()*100 + '%');

  });

}, 1);

setInterval(function(){

    $('#starsBox span').each(function(){

         $(this).css('top', Math.random()*100 + '%').css('left', Math.random()*100 + '%');

  });

}, 100000);

</script>

关键代码

　　定义size为随机数，用于生成随机颜色和闪烁点随机距离

  var size = Math.random()*3;

  var color = cols[parseInt(Math.random()*4)];

　　设置星星闪烁、大小和颜色

    $('#starsBox').prepend('<span style=" width: ' + size + 'px; height: ' + size + 'px; top: ' + Math.random()*100 + '%; left: ' + Math.random()*100 + '%; background: ' + color + '; box-shadow: 0 0 '+ Math.random()*10 +'px' + color + ';"></span>') ;

};

　　到达随机时间后星星闪烁和移动发生变化

setTimeout(function(){

    $('#starsBox span').each(function(){

         $(this).css('top', Math.random()*100 + '%').css('left', Math.random()*100 + '%');

  });

}, 1);

　　设置每个星星之间的随机间隔

setInterval(function(){

    $('#starsBox span').each(function(){

         $(this).css('top', Math.random()*100 + '%').css('left', Math.random()*100 + '%');

  });

}, 100000);

JS框架_(JQuery.js)夜晚天空满天星星闪烁动画的更多相关文章

JS框架_(JQuery.js)绚丽的3D星空动画
百度云盘: 传送门密码:8ft8 绚丽的3D星空动画效果(纯CSS) (3D星空动画可以用作网页背景,Gary为文本文字) <!doctype html> <html lang=& ...
JS框架_(JQuery.js)圆形多选菜单选项
百度云盘传送门密码:zb1c 圆形多选菜单选项效果: <!DOCTYPE html> <html lang="en" > <head> &l ...
JS框架_(JQuery.js)Tooltip弹出式按钮插件
百度云盘传送门密码:7eh5 弹出式按钮效果 <!DOCTYPE html> <html > <head> <meta charset="UTF ...
JS框架_(JQuery.js)文章全屏动画切换
百度云盘传送门密码:anap 文章全屏动画切换效果 <!doctype html> <html lang="zh"> <head> < ...
JS框架_(JQuery.js)动画效果鼠标跟随
百度云盘传送门密码 :4n9u 火狐浏览器上纯CSS_动画效果鼠标跟随效果: (作者:lily_lcj 传送门) <!DOCTYPE html PUBLIC "-//W3C//DT ...
JS框架_(JQuery.js)点赞按钮动画
百度云盘传送门密码: 0ihy 点赞按钮动画效果: (点击一次随机生成一颗小爱心,作为点赞动画~) <!doctype html> <html lang="en&quo ...
JS框架_(JQuery.js)图片相册掀开切换效果
百度云盘传送门密码:y0dk 图片掀开切换效果: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo ...
JS框架_(JQuery.js)上传进度条
百度云盘传送门密码: 1pou 纯CSS上传进度条效果: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN ...
JS框架_(JQuery.js)模拟刮奖
百度云盘:传送门密码:6p5q 纯CSS模拟刮奖效果 <!DOCTYPE html> <html lang="en"> <head> < ...

随机推荐

oa_mvc_easyui_详细页(5)
1.表格详细列中添加a标签,给id参数 <a href="javascript:void(0)" class="details" ids="@n ...
Git复习（三）之分支管理、分支策略
创建合并删除分支我们知道每次提交git都会将他们串成一条线,这条时间线就是一个分支.在git里这条时间线叫做主分支,即master分支 HEAD指向master,master指向最新的提交,所以,H ...
108、如何使用 Secret？（Swarm15）
参考https://www.cnblogs.com/CloudMan6/p/8068057.html 我们经常要想容器传递敏感信息,最常见的就是密码.比如: docker run -e MYS ...
java中的Enum在@RestController(@ResponseBody) 注解下返回的表现
参考文档枚举 public enum CouponType { PLATFORM("平台优惠券"), NEWCOMER("新人专享优惠券"), INVITE( ...
Java程序员常用的Linux命令01——linux命令基础
1.显示日期的命令date 显示日期: [root@localhost ~]# date 显示年月日: [root@localhost ~]# date '+%Y%m%d' 2.显示日历指令cal 显 ...
运维都该会的Socket知识！
本篇博客转自赵班长所有运维都会的Socket知识!!! 原创: 赵班长新运维社区什么是Socket? 大家都用电脑上网,当我们访问运维社区https://www.unixhot.com的时候,我 ...
有趣的动画swf 小鼠吃豆子
今天发现一个有趣的动画swf,小鼠吃豆子,呵呵 <object width="240" height="206" data="http://cd ...
zencart通过产品id 批量添加推荐产品
1.修改 admin/featured.php 查找 pre_add_confirmation 将 pre_add_confirmation 与 break; 之间的代码,用下面的代码替换即可 &l ...
maven模块开发（转）
所有用Maven管理的真实的项目都应该是分模块的,每个模块都对应着一个pom.xml.它们之间通过继承和聚合(也称作多模块,multi-module)相互关联.那么,为什么要这么做呢?我们明明在开发一 ...
CLI
命令行界面(英语:command-line interface,缩写:CLI)是在图形用户界面得到普及之前使用最为广泛的用户界面,它通常不支持鼠标,用户通过键盘输入指令,计算机接收到指令后,予以执行. ...

JS框架_(JQuery.js)夜晚天空满天星星闪烁动画

JS框架_(JQuery.js)夜晚天空满天星星闪烁动画的更多相关文章

随机推荐

热门专题