百度云盘：　　传送门　　密码：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星空动画的更多相关文章

  1. JS框架_(JQuery.js)夜晚天空满天星星闪烁动画

    百度云盘 传送门 密码:xftr 满天星星闪烁动画效果: (可用星空动画来作为页面背景,白色文字改为文章或者其他的O(∩_∩)O) <!doctype html> <html> ...

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

    百度云盘 传送门 密码:7eh5 弹出式按钮效果 <!DOCTYPE html> <html > <head> <meta charset="UTF ...

  3. JS框架_(JQuery.js)圆形多选菜单选项

    百度云盘 传送门 密码:zb1c 圆形多选菜单选项效果: <!DOCTYPE html> <html lang="en" > <head> &l ...

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

    百度云盘 传送门 密码:anap 文章全屏动画切换效果 <!doctype html> <html lang="zh"> <head> < ...

  5. JS框架_(JQuery.js)动画效果鼠标跟随

    百度云盘 传送门 密码 :4n9u 火狐浏览器上纯CSS_动画效果鼠标跟随效果: (作者:lily_lcj 传送门) <!DOCTYPE html PUBLIC "-//W3C//DT ...

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

    百度云盘 传送门 密码: 0ihy 点赞按钮动画效果: (点击一次随机生成一颗小爱心,作为点赞动画~) <!doctype html> <html lang="en&quo ...

  7. JS框架_(JQuery.js)图片相册掀开切换效果

    百度云盘 传送门 密码:y0dk 图片掀开切换效果: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo ...

  8. JS框架_(JQuery.js)上传进度条

    百度云盘 传送门 密码: 1pou 纯CSS上传进度条效果: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN ...

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

    百度云盘:传送门 密码:6p5q 纯CSS模拟刮奖效果 <!DOCTYPE html> <html lang="en"> <head> < ...

随机推荐

  1. PHP 根据整数ID，生成唯一字符串

    //根据ID计算唯一邀请码 public static function createCode($Id){ static $sourceString = [ 0,1,2,3,4,5,6,7,8,9,1 ...

  2. python中迭代器和生成器的详细解释

    https://www.cnblogs.com/wilber2013/p/4652531.html

  3. python-day43(正式学习)

    目录 复习 今日内容 字段操作 多表关系 外键 一对一:无级联关系 一对一:有级联关系 一对多 多对多 复习 """ 1.数据库的配置:my.ini [mysqld][m ...

  4. 14、PCA分析

    做芯片PCA主成分分析可以选择使用affycoretools包的plotPCA方法,以样品"GSM363445_LNTT.CEL"."GSM362948_LTT.CEL& ...

  5. zookeeperAPI的常用方法

    zookeeper支持三种部署方式: 1 单机 2 集群 3 伪集群 删除节点 zkClient.delete(path);

  6. O016、搭建实验环境

    参考https://www.cnblogs.com/CloudMan6/p/5350536.html   在学习 OpenStack 各服务之前,需要先搭建一个实验环境.   一个看得到摸得着而且能让 ...

  7. Appium Android 获取包名appPackage和appActivity的几种方法

    情况1: 安装包未安装到手机 准备前提条件: 1 Android SDK管理工具目录 2 PC端有apk包 使用方法: 1 打开终端,当前路径移动到sdk管理工具目录tools或build-tools ...

  8. 配置jupyter notebook网页浏览

    上一篇博文已经介绍安装了Anaconda3:https://www.cnblogs.com/hello-wei/p/10233192.html jupyter notebook [I 11:33:11 ...

  9. Delphi 有类型文件

  10. Delphi FileListBox组件