这是一款效果非常炫酷的jQuery和CSS3星空动画特效。该星空特效模拟黄昏时分漫天星星移动的效果。整个特效仅使用少量的CSS和jQuery代码来完成，效果绝对的震撼。
要观看最佳效果，请使用Chrome或Firefox浏览器来查看DEMO。
制作方法
HTML结构
该星空特效的HTML结构采用一个空的<div>来制作。
<div class="stars"> </div> |
CSS样式
为了模拟黄昏是的天空效果，整个背景使用渐变来制作背景色。
body { background: radial-gradient(200% 100% at bottom center, #f7f7b6, #e96f92, #75517d, #1b2947); background: radial-gradient(220% 105% at top center, #1b2947 10%, #75517d 40%, #e96f92 65%, #f7f7b6); background-attachment: fixed; overflow: hidden;} |
整个星空的画布使用perspective制作为3D空间，同时修改透视的原点为50% 100%，并执行rotate帧动画。该帧动画用于对画布中的元素进行旋转。
@keyframes rotate { 0% { transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(0); } 100% { transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(-360deg); }}.stars { transform: perspective(500px); transform-style: preserve-3d; position: absolute; bottom: 0; perspective-origin: 50% 100%; left: 50%; animation: rotate 90s infinite linear;} |
所有的小星星都是通过jQuery代码动态添加到画布中的，添加时被赋予.star class。在CSS样式中，设置了星星的通用样式，并使用translate3d()函数使它们绕Z轴旋转。
.star { width: 2px; height: 2px; background: #F7F7B6; position: absolute; top: 0; left: 0; transform-origin: 0 0 -300px; transform: translate3d(0, 0, -300px); backface-visibility: hidden;} |
JAVASCRIPT
该星空特效使用jQuery来生成小星星。在生成星星之后，会对它们进行遍历，然后随机修改它们的旋转角度和缩放尺寸。
$(document).ready(function () { var stars = 800; var $stars = $('.stars'); var r = 800; for (var i = 0; i < stars; i++) { if (window.CP.shouldStopExecution(1)) { break; } var $star = $('<div/>').addClass('star'); $stars.append($star); } window.CP.exitedLoop(1); $('.star').each(function () { var cur = $(this); var s = 0.2 + Math.random() * 1; var curR = r + Math.random() * 300; cur.css({ transformOrigin: '0 0 ' + curR + 'px', transform: ' translate3d(0,0,-' + curR + 'px) rotateY(' + Math.random() * 360 + 'deg) rotateX(' + Math.random() * -50 + 'deg) scale(' + s + ',' + s + ')' }); });}); |
