百度云盘  传送门  密码: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. 双01字典树最小XOR(three arrays)--2019 Multi-University Training Contest 5(hdu杭电多校第5场)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6625 题意: 给你两串数 a串,b串,让你一一配对XOR使得新的 C 串字典序最小. 思路: 首先这边 ...

  2. MySQL的库、表的详细操作

    目录 MySQL的库.表的详细操作 一 库操作 二 表操作 MySQL的库.表的详细操作 本节目录 一 库操作 1.创建数据库 1.1 语法 CREATE DATABASE 数据库名 charset ...

  3. Eclipce远程调试

    1.注意: root权限启动的进程不支持远程调试,也有很多隐患,支持最高权限,应用普通用户启动,又原先安装Tomcat是使用的root权限,普通用户对root安装的软件没有执行权限,可以修改相应权限, ...

  4. SQL学习(三)之子句和函数

    函数 COUNT()/计数.MIN()/最小值.MAX()/最大值.AVG()/平均值.SUM()/和 子句 子句是语句的一部分包括WHERE.GROUP.ORDER.LIMIT WHERE:条件 G ...

  5. ubuntu16.04 Installing PHP 7.2

    //install sudo add-apt-repository ppa:ondrej/php sudo apt-get update sudo apt-get install php7.2 //C ...

  6. python中字符串格式化的意义(化妆)

    格式 描述%% 百分号标记 #就是输出一个%%c 字符及其ASCII码%s 字符串%d 有符号整数(十进制)%u 无符号整数(十进制)%o 无符号整数(八进制)%x 无符号整数(十六进制)%X 无符号 ...

  7. python多线程、多进程、协程笔记

    import threading import time import multiprocessing import asyncio movie_list = ['斗破.avi', '复仇者联盟.mp ...

  8. Hyperledger Fabric(1)基础架构

    前言 在区块链的家谱里,第一代区块链系统是以比特币为代表的公链,主要实现的是数字货币的功能:第二代区块链系统是以以太坊平台为代表的公链,创造性的实现了智能合约.而第三代区块链系统,则是HyperLed ...

  9. linux系统设置登录失败n次锁定账户:vim /etc/pam.d/system-auth

    auth required pam_env.so 登陆后的环境变量 auth sufficient pam_fprintd.so 指纹认证 auth sufficient pam_unix.so nu ...

  10. linux 静态路由

    用ip route删除默认路由 ip route del default via 192.168.18.1 用route删除默认路由route del default gw 192.168.18.1 ...