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)夜晚天空满天星星闪烁动画
百度云盘传送门密码:xftr 满天星星闪烁动画效果: (可用星空动画来作为页面背景,白色文字改为文章或者其他的O(∩_∩)O) <!doctype html> <html> ...
JS框架_(JQuery.js)Tooltip弹出式按钮插件
百度云盘传送门密码:7eh5 弹出式按钮效果 <!DOCTYPE html> <html > <head> <meta charset="UTF ...
JS框架_(JQuery.js)圆形多选菜单选项
百度云盘传送门密码:zb1c 圆形多选菜单选项效果: <!DOCTYPE html> <html lang="en" > <head> &l ...
JS框架_(JQuery.js)文章全屏动画切换
百度云盘传送门密码:anap 文章全屏动画切换效果 <!doctype html> <html lang="zh"> <head> < ...
JS框架_(JQuery.js)动画效果鼠标跟随
百度云盘传送门密码 :4n9u 火狐浏览器上纯CSS_动画效果鼠标跟随效果: (作者:lily_lcj 传送门) <!DOCTYPE html PUBLIC "-//W3C//DT ...
JS框架_(JQuery.js)点赞按钮动画
百度云盘传送门密码: 0ihy 点赞按钮动画效果: (点击一次随机生成一颗小爱心,作为点赞动画~) <!doctype html> <html lang="en&quo ...
JS框架_(JQuery.js)图片相册掀开切换效果
百度云盘传送门密码:y0dk 图片掀开切换效果: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo ...
JS框架_(JQuery.js)上传进度条
百度云盘传送门密码: 1pou 纯CSS上传进度条效果: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN ...
JS框架_(JQuery.js)模拟刮奖
百度云盘:传送门密码:6p5q 纯CSS模拟刮奖效果 <!DOCTYPE html> <html lang="en"> <head> < ...

随机推荐

数据库or、in、<>、>=、<=、butween区别
操作前先关闭数据库缓存 #创建测试的test表 DROP TABLE IF EXISTS test; CREATE TABLE test( `id` ) NOT NULL, `name` ) DEFA ...
Java continue 、break、标签
任何迭代语句的主体部分都可以用break和continue控制循环流程,其中break用于强行退出循环,不执行循环中剩余的语句, 而continue则停止当前的迭代,然后退回循环起始处,开始下一次迭代 ...
linux查看端口被占用情况
Linux 查看端口占用情况可以使用 lsof 和 netstat 命令. 如果linux中没有这两个命令,则yum安装一下 yum install -y lsof yum install -y ne ...
深入理解hadoop之机架感知
深入理解hadoop之机架感知机架感知 hadoop的replication为3,机架感知的策略为: 第一个block副本放在和client所在的datanode里(如果client不在集群范围内, ...
18 Python之初识面向对象
1. 类与对象 class Car: #类名首字母大写,严格遵守驼峰命名规范 pass #造车 c = Car() #类名() #创建对象 ##出场之后进行改装 c.color = "红色& ...
05 Django之模型层---单表操作
一 ORM简介 MVC或者MVC框架中包括一个重要的部分,就是ORM,它实现了数据模型与数据库的解耦,即数据模型的设计不需要依赖于特定的数据库,通过简单的配置就可以轻松更换数据库,这极大的减轻了开发人 ...
Java高并发程序设计学习笔记（一）：并行简介以及重要概念
转自:https://blog.csdn.net/dataiyangu/article/details/86211544#_28 文章目录为什么需要并行?反对意见大势所趋几个重要的概念同步(synch ...
isAssignable
import java.util.HashMap; import java.util.Map; public class MapTest { public static void main(Strin ...
Delphi FileListBox组件
flume--为搬砖而生，日志传输的一把好手
(一)flume的产生为什么会有flume 随着互联网的发展,人们对网络日志产生的信息也越来越重视.不仅如此,我们的服务器,比如Nginx,每天都会产生大量的日志.我们要将这些日志收集到指定的地方, ...

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

JS框架_(JQuery.js)绚丽的3D星空动画的更多相关文章

随机推荐

热门专题