jQuery炫丽星空3d旋转星空

所属分类:UI,其他-背景,动画效果

 75221  615  查看评论 (25)
分享到微信朋友圈
X
jQuery炫丽星空3d旋转星空 ie兼容10

实现方法

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 + ')'
        });
    });
});
相关插件-背景,动画效果

全屏背景滚动

基于HTML5的炫酷个人网站模板
  背景
 77345  1079

jQuery全屏背景插件Vegas2

网页全屏背景jQuery插件 Vegas2,它和其它背景插件不同之处就是带有幻灯片功能。幻灯片的切换有多种风格,如旋转、渐隐、左右等方式,切换的时候还有进度条显示。
  背景
 42062  494

jquery形象照片卷轴插件

jquery形象照片卷轴插件
  背景
 40009  363

基于canvas的星空效果

基于canvas的星空粒子效果(代码注释全!)
  背景
 72657  405

讨论这个项目(25)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    Cactus 0
    2019/10/16 14:05:21
    ie11结合fullpage插件时有问题 回复
    0
    2019/10/7 11:58:53
    GN_凉风 0
    2019/4/30 17:02:40
    ??那天的流星?? 0
    2019/4/5 16:00:30
    有点晕建议调节一下旋转方式和速度 回复
    SKYRIMAL 0
    2019/4/5 11:58:20
    后端程序员过来 参考 页面来啦
    【滑稽】 回复
    tingXin 0
    2019/3/29 9:34:16
    Trespassing 0
    2019/1/2 9:35:58
    背景不要用渐变的蓝色,而是用一种接近深夜的黑,美哭了,好想录下来给大家看,真的好好好好好好好好看~~~~~
        Hungry0
        2019/1/17 18:14:36
        在哪改啊,求代码
        さようなら0
        2019/11/29 11:50:37
        调节body背景色就可以
    回复
    鼎嘉鼎嘉鼎 0
    2018/12/27 8:13:59
    ?? Funfunny?? 0
    2018/11/18 16:47:36
    怎么让这个div里面的其他div保持不随其3D旋转呢 回复
    曹懦懦?? 0
    2018/9/11 13:38:02
    火狐浏览器 卡顿
        YU.Z.W0
        2019/2/20 16:34:17
        你用的哪个版本?
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复