满天星星闪烁动画效果：
(可用星空动画来作为页面背景，白色文字改为文章或者其他的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>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)夜晚天空满天星星闪烁动画
原文地址：https://www.cnblogs.com/1138720556Gary/p/9374845.html