JS框架_(JQuery.js)绚丽的3D星空动画

Posted Cynical丶Gary

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS框架_(JQuery.js)绚丽的3D星空动画相关的知识,希望对你有一定的参考价值。

 

 

百度云盘:  传送门  密码:8ft8

 

绚丽的3D星空动画效果(纯CSS)

(3D星空动画可以用作网页背景,Gary为文本文字)

 

<!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="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script src=\'js/prefixfree.min.js\'></script>
    <style class="cp-pen-styles">
    
    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;
    }
    
    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>
    
    <p>Gary</p>
    <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>
index.html

 

(使用了三个框架)

  jquery.min

  prefixfree.min

  stopExecutionOnTimeout

 

 

实现过程

 

CSS

 

星空渐变背景

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

 background:设置星空夜晚渐变效果(也不知道他们是怎么测试出来的)

background-attachment :指定一个固定的背景图像

  fixed 背景图像是固定的

 

星空(一颗)

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

 transform-origin:设置旋转元素的基点位置  传送门

  x-axis:定义视图被置于 X 轴的何处

  y-axis:定义视图被置于 Y 轴的何处

  z-axis:定义视图被置于 Z 轴的何处

backface-visibility:隐藏被旋转的 div 元素的背面(影藏星星在星空下)

 

动态星空(多颗)

    .stars {
      transform: perspective(500px);
      transform-style: preserve-3d;
      position: absolute;
      bottom: 0;
      perspective-origin: 50% 100%;
      left: 50%;
      animation: rotate 90s infinite linear;
    }

perspective 定义 3D 元素距视图的距离(星星在星空中的距离)

 

 

制作星空动画

    @keyframes rotate {
      0% {
        transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(0);
      }
      100% {
        transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(-360deg);
      }
    }

  perspective():为 星星转换元素定义透视视图

  rotateZ() :定义星星沿着 Z 轴的 3D 旋转 20deg

  rotateX(): 定义星星沿着 X 轴的 3D 旋转 -40deg

  rotateY(): 定义星星沿着 Y 轴的 3D 旋转

 

DOM

    <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>

当 DOM(文档对象模型) 已经加载,并且页面(包括图像)已经完全呈现时,会发生 ready 事件

  星星遍布夜空

 

addClass() :向被选元素添加一个或多个类名

append() :用于在列表末尾添加新的对象

 

transform-origin :设置旋转元素的基点位置

                transformOrigin: \'0 0 \' + curR + \'px\',
                transform: \' translate3d(0,0,-\' + curR + \'px) rotateY(\' + Math.random() * 360 + \'deg) rotateX(\' + Math.random() * -50 + \'deg) scale(\' + s + \',\' + s + \')\'

   transformOrigin:星空每次都绕着字体中间旋转

    transform:随机出现新的星星

 

 

暂时不知道

  window.CP.shouldStopExecution(1)

  window.CP.exitedLoop(1)

有什么用。。。

  O(∩_∩)O留着

 

以上是关于JS框架_(JQuery.js)绚丽的3D星空动画的主要内容,如果未能解决你的问题,请参考以下文章

JS框架_(JQuery.js)点赞按钮动画

JS框架_(jQuery.js)文章全屏动画切换

JS框架_(JQuery.js)纯css3进度条动画

新书推荐 |《Three.js开发指南:基于WebGL和HTML5在网页上渲染3D图形和动画(原书第3版)》

JS框架_(JQuery.js)模拟刮奖

JS框架_(jQuery.js)Tooltip弹出式按钮插件