jQuery炫丽星空3d旋转星空

该特效也是在Jquery插件库中找到的,感觉效果不错,说不定以后项目中要有绚丽的星空背景,拿来即用,收藏了下。

网上下载地址:http://www.jq22.com/jquery-info16294

下载解压后的目录结构

这里写图片描述

index.html页面代码:

<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery和CSS3超绚丽的3D星空动画特效</title>
    <script src="js/jquery.min.js"></script>
    <script src='js/prefixfree.min.js'></script>
    <style class="cp-pen-styles">body {
      background: radial-gradient(200% 100% at bottom center, #0070aa, #0b2570, #000035, #000);
      background: radial-gradient(220% 105% at top center, #000 10%, #000035 40%, #0b2570 65%, #0070aa);
      background-attachment: fixed;
      overflow: hidden;
    }

    @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;
    }

    .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;
    }
    </style>
</head>
<body>

    <div class="stars">

    </div>
    <script src='js/stopExecutionOnTimeout.js'></script>

    <script>
    $(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 + ')'
            });
        });
    });

    </script>
</body>
</html>

运行的效果如下:

这里写图片描述

效果还是挺不错的,你可以改变背景颜色等等定制。

专业墙纸贴纸厨房用具装饰出售,本人网店经营

博客对你有用记得访问下哦,增加下访问量,如有需要可以下单购买哦^_^。https://item.taobao.com/item.htm?id=569617707364

©️2020 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值