百度云盘　　传送门　　密码: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)夜晚天空满天星星闪烁动画的更多相关文章

  1. JS框架_(JQuery.js)绚丽的3D星空动画

    百度云盘: 传送门 密码:8ft8 绚丽的3D星空动画效果(纯CSS) (3D星空动画可以用作网页背景,Gary为文本文字) <!doctype html> <html lang=& ...

  2. JS框架_(JQuery.js)圆形多选菜单选项

    百度云盘 传送门 密码:zb1c 圆形多选菜单选项效果: <!DOCTYPE html> <html lang="en" > <head> &l ...

  3. JS框架_(JQuery.js)Tooltip弹出式按钮插件

    百度云盘 传送门 密码:7eh5 弹出式按钮效果 <!DOCTYPE html> <html > <head> <meta charset="UTF ...

  4. JS框架_(JQuery.js)文章全屏动画切换

    百度云盘 传送门 密码:anap 文章全屏动画切换效果 <!doctype html> <html lang="zh"> <head> < ...

  5. JS框架_(JQuery.js)动画效果鼠标跟随

    百度云盘 传送门 密码 :4n9u 火狐浏览器上纯CSS_动画效果鼠标跟随效果: (作者:lily_lcj 传送门) <!DOCTYPE html PUBLIC "-//W3C//DT ...

  6. JS框架_(JQuery.js)点赞按钮动画

    百度云盘 传送门 密码: 0ihy 点赞按钮动画效果: (点击一次随机生成一颗小爱心,作为点赞动画~) <!doctype html> <html lang="en&quo ...

  7. JS框架_(JQuery.js)图片相册掀开切换效果

    百度云盘 传送门 密码:y0dk 图片掀开切换效果: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo ...

  8. JS框架_(JQuery.js)上传进度条

    百度云盘 传送门 密码: 1pou 纯CSS上传进度条效果: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN ...

  9. JS框架_(JQuery.js)模拟刮奖

    百度云盘:传送门 密码:6p5q 纯CSS模拟刮奖效果 <!DOCTYPE html> <html lang="en"> <head> < ...

随机推荐

  1. Ruby学习中(首探数组, 注释, 运算符, 三元表达式, 字符串)

    一. 数组 1.定义一个数组 games = ["英雄联盟", "绝地求生", "钢铁雄心"] puts games 2.数组的循环 gam ...

  2. leecode刷题（23）-- 合并两个有序链表

    leecode刷题(23)-- 合并两个有序链表 合并两个有序链表 将两个有序链表合并为一个新的有序链表并返回.新链表是通过拼接给定的两个链表的所有节点组成的. 示例: 输入:1->2-> ...

  3. php函数之strtr和str_replace的区别

    php字符串替换函数 strtr()有两种用法: strtr(string,from,to) 或者strtr(string,array) 首先针对strtr函数第一种方式: 我们看看下面的举例: &l ...

  4. Linux下安装配置启动RabbitMQ

    Linux版本:Centos 7RabbitMQ依赖erlang所以需要先安装erlang以及他需要的环境 安装erlang http://www.erlang.org/downloads 拿最新的版 ...

  5. MySQL 5.7 免安装版 access denied 解决办法

    MySQL 5.7 在Windows 下安装的过程很多人都写过了 但是安装完成后用 root 第一次登录时需要密码 可是我根本就没设密码嘛... 搞了半天最后终于搞定了 在执行 mysqld --in ...

  6. 5.（基础）tornado异步

    终于到了传说中的异步了,感觉异步这个名字听起来就很酷酷的,以前还不是多擅长Python时,就跑去看twisted的源码,结果给我幼小的心灵留下了创伤.反正包括我在内,都知道异步编程很强大,但是却很少在 ...

  7. Linux系统吃“内存”现象

    而当我们使用free命令查看Linux系统内存使用情况时,会发现内存使用一直处于较高的水平,即使此时系统并没有运行多少软件.这正是Windows和Linux在内存管理上的区别,乍一看,Linux系统吃 ...

  8. 可靠的TCP连接为何是三次握手和四次挥手

    首先,咱们先来熟悉下经典的tcp/ip模型. tcp/ip 模型为了方便使用,将osi七层模型划分成了四层,分别为网络接口层,网络层,传输层,应用层. 他们作用分别为: 1)网络接口层:主要作用是将i ...

  9. 手动写一个类支持foreach循环

    之前初学时看过可以实现Iterable接口实现Iterator迭代器的支持,并且也支持foreach循环.现在学习了数据结构,手动写一个单链表支持foreach循环吧. 手写foreach循环步骤: ...

  10. 标准C语言(5)

    无法预知的数字叫随机数,rand标准函数可以用来获得随机数,为了使用这个标准函数需要包含stdlib.h头文件 srand标准函数用来设置随机数种子,这个函数把一个整数作为种子使用不同的种子可以得到不 ...