jQuery实现炫丽的3d旋转星空效果


Posted in jQuery onJuly 04, 2018

本文实例讲述了jQuery实现炫丽的3d旋转星空效果。分享给大家供大家参考,具体如下:

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

下载解压后的目录结构

jQuery实现炫丽的3d旋转星空效果

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="http://libs.baidu.com/jquery/2.0.0/jquery.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>

运行的效果如下:

jQuery实现炫丽的3d旋转星空效果

其中stopExecutionOnTimeout.js如下:

"use strict";"object"!=typeof window.CP&&(window.CP={}),window.CP.PenTimer={programNoLongerBeingMonitored:!1,timeOfFirstCallToShouldStopLoop:0,_loopExits:{},_loopTimers:{},START_MONITORING_AFTER:2e3,STOP_ALL_MONITORING_TIMEOUT:5e3,MAX_TIME_IN_LOOP_WO_EXIT:2200,exitedLoop:function(o){this._loopExits[o]=!0},shouldStopLoop:function(o){if(this.programKilledSoStopMonitoring)return!0;if(this.programNoLongerBeingMonitored)return!1;if(this._loopExits[o])return!1;var t=this._getTime();if(0===this.timeOfFirstCallToShouldStopLoop)return this.timeOfFirstCallToShouldStopLoop=t,!1;var i=t-this.timeOfFirstCallToShouldStopLoop;if(i<this.START_MONITORING_AFTER)return!1;if(i>this.STOP_ALL_MONITORING_TIMEOUT)return this.programNoLongerBeingMonitored=!0,!1;try{this._checkOnInfiniteLoop(o,t)}catch(n){return this._sendErrorMessageToEditor(),this.programKilledSoStopMonitoring=!0,!0}return!1},_sendErrorMessageToEditor:function(){try{if(this._shouldPostMessage()){var o={action:"infinite-loop",line:this._findAroundLineNumber()};parent.postMessage(JSON.stringify(o),"*")}else this._throwAnErrorToStopPen()}catch(t){this._throwAnErrorToStopPen()}},_shouldPostMessage:function(){return document.location.href.match(/boomerang/)},_throwAnErrorToStopPen:function(){throw"We found an infinite loop in your Pen. We've stopped the Pen from running. Please correct it or contact support@codepen.io."},_findAroundLineNumber:function(){var o=new Error,t=0;if(o.stack){var i=o.stack.match(/boomerang\S+:(\d+):\d+/);i&&(t=i[1])}return t},_checkOnInfiniteLoop:function(o,t){if(!this._loopTimers[o])return this._loopTimers[o]=t,!1;var i=t-this._loopTimers[o];if(i>this.MAX_TIME_IN_LOOP_WO_EXIT)throw"Infinite Loop found on loop: "+o},_getTime:function(){return+new Date}},window.CP.shouldStopExecution=function(o){return window.CP.PenTimer.shouldStopLoop(o)},window.CP.exitedLoop=function(o){window.CP.PenTimer.exitedLoop(o)};

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

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jquery.uploadView 实现图片预览上传功能
Aug 10 jQuery
jQuery plugin animsition使用小结
Sep 14 jQuery
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
Oct 13 jQuery
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 jQuery
jQuery点击页面其他部分隐藏下拉菜单功能
Nov 27 jQuery
Jquery的Ajax技术使用方法
Jan 21 jQuery
jQuery中使用validate插件校验表单功能
May 24 jQuery
jQuery实现高级检索功能
May 28 jQuery
jQuery创建折叠式菜单
Jun 15 jQuery
jquery css实现流程进度条
Mar 26 jQuery
jQuery 移除事件的方法
Jun 20 jQuery
jQuery实现table表格checkbox全选的方法分析
Jul 04 #jQuery
jQuery实现表单动态添加与删除数据操作示例
Jul 03 #jQuery
jQuery实现获取form表单内容及绑定数据到form表单操作分析
Jul 03 #jQuery
jQuery阻止事件冒泡实例分析
Jul 03 #jQuery
jQuery实现模糊搜索功能的方法分析
Jun 29 #jQuery
jQuery实现获取动态添加的标签对象示例
Jun 28 #jQuery
jQuery实现获取选中复选框的值实例详解
Jun 28 #jQuery
You might like
Function eregi is deprecated (解决方法)
2013/06/21 PHP
PHP和MySql中32位和64位的整形范围是多少
2016/02/18 PHP
Yii2 队列 shmilyzxt/yii2-queue 简单概述
2017/08/02 PHP
yii2中LinkPager增加总页数和总记录数的实例
2017/08/28 PHP
PHP实现微信小程序人脸识别刷脸登录功能
2018/05/24 PHP
分享5个非常有用的Laravel Blade指令
2018/05/30 PHP
jquery trim() 功能源代码
2011/02/14 Javascript
js网页中的(运行代码)功能实现思路
2013/02/04 Javascript
使用jQuery实现的掷色子游戏动画效果
2014/03/14 Javascript
JavaScript 学习笔记之数据类型
2015/01/14 Javascript
javascript实现一个数值加法函数
2015/06/26 Javascript
jQuery+ajax实现文章点赞功能的方法
2015/12/31 Javascript
浅谈JavaScript函数的四种存在形态
2016/06/08 Javascript
JS转换HTML转义符的方法
2016/08/24 Javascript
原生js实现新闻列表展开/收起全文功能
2017/01/20 Javascript
JS实现仿饿了么在浏览器标签页失去焦点时网页Title改变
2017/06/01 Javascript
vue2.0中click点击当前li实现动态切换class
2017/06/21 Javascript
vue watch自动检测数据变化实时渲染的方法
2018/01/16 Javascript
浅谈vue的props,data,computed变化对组件更新的影响
2018/01/16 Javascript
基于Vue-cli快速搭建项目的完整步骤
2018/11/03 Javascript
解决vue 单文件组件中样式加载问题
2019/04/24 Javascript
教你30秒发布一个TypeScript包到NPM的方法步骤
2019/07/22 Javascript
基于javascript实现日历功能原理及代码实例
2020/05/07 Javascript
Python中的super用法详解
2015/05/28 Python
Python正则简单实例分析
2017/03/21 Python
Python将一个CSV文件里的数据追加到另一个CSV文件的方法
2018/07/04 Python
python监测当前联网状态并连接的实例
2018/12/18 Python
Python爬虫动态ip代理防止被封的方法
2019/07/07 Python
pytorch打印网络结构的实例
2019/08/19 Python
Python调用shell命令常用方法(4种)
2020/05/11 Python
在 Python 中使用 7zip 备份文件的操作
2020/12/11 Python
用HTML5的canvas实现一个炫酷时钟效果
2016/05/20 HTML / CSS
日本亚马逊官方网站:Amazon.co.jp
2020/04/14 全球购物
售后服务承诺书怎么写
2014/05/21 职场文书
超市七夕促销活动方案
2014/08/28 职场文书
Java设计模式中的命令模式
2022/04/28 Java/Android