浙江 杭州

jQuery和CSS3超绚丽的3D星空动画特效

系统分类: 网页特效 - jquery插件 - jQuery高级页面组件 2017-05-25

人气4344

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


这是一款效果非常炫酷的jQueryCSS3星空动画特效。该星空特效模拟黄昏时分漫天星星移动的效果。整个特效仅使用少量的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 + ')'
        });
    });
});                
              

查看演示
下载资源:3
下载资源
错误提交:

格式:zip 大小:13.75KB

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-1833.html 非特殊说明,本文版权归原作者所有,转载请注明出处
jQuery和CSS3超绚丽的3D星空动画特效

我当前G币余额:0 已下载次数:3

注:点击右侧分享按钮并且留下评论自动+10G币

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

 
标签 3d 星空效果 

说点什么...(已有3 评论)