百度云盘 传送门 密码: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=" ' + 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=" ' + 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=" ' + 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);