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插件开发发送短信倒计时功能代码
May 09 jQuery
jQuery实现web页面樱花坠落的特效
Jun 01 jQuery
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
Jun 11 jQuery
jquery基于layui实现二级联动下拉选择(省份城市选择)
Jun 20 jQuery
jQuery实现的文字逐行向上间歇滚动效果示例
Sep 06 jQuery
jQuery中复合选择器简单用法示例
Mar 31 jQuery
jQuery中ajax请求后台返回json数据并渲染HTML的方法
Aug 08 jQuery
详解jQuery如何实现模糊搜索
May 10 jQuery
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
Nov 07 jQuery
jQuery实现可编辑的表格
Dec 11 jQuery
如何使用Jquery动态生成二级选项列表
Feb 06 jQuery
jquery实现点击左右按钮切换图片
Jan 27 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
php FPDF类库应用实现代码
2009/03/20 PHP
浅析php过滤html字符串,防止SQL注入的方法
2013/07/02 PHP
新手菜鸟必读:session与cookie的区别
2013/08/22 PHP
2款PHP无限级分类实例代码
2015/11/11 PHP
laravel 5.1下php artisan migrate的使用注意事项总结
2017/06/07 PHP
jquery定时滑出可最小化的底部提示层特效代码
2013/10/02 Javascript
js简单实现交换Li的值
2014/05/22 Javascript
js实现绿白相间竖向网页百叶窗动画切换效果
2015/03/02 Javascript
实现前后端数据交互方法汇总
2015/04/07 Javascript
javascript实现tab切换的四种方法
2015/11/05 Javascript
Jquery组件easyUi实现手风琴(折叠面板)示例
2016/08/23 Javascript
使用JS轻松实现ionic调用键盘搜索功能(超实用)
2016/09/06 Javascript
探索Vue.js component内容实现
2016/11/03 Javascript
微信小程序 input输入及动态设置按钮的实现
2017/10/27 Javascript
selenium+java中用js来完成日期的修改
2019/10/31 Javascript
node.js使用mongoose操作数据库实现购物车的增、删、改、查功能示例
2019/12/23 Javascript
js实现双色球效果
2020/08/02 Javascript
[44:30]完美世界DOTA2联赛PWL S2 GXR vs Magma 第一场 11.25
2020/11/26 DOTA
python list使用示例 list中找连续的数字
2014/01/27 Python
Python多线程编程(六):可重入锁RLock
2015/04/05 Python
简单介绍Python中的RSS处理
2015/04/13 Python
Python中django学习心得
2017/12/06 Python
解决python3中解压zip文件是文件名乱码的问题
2018/03/22 Python
使用pandas读取csv文件的指定列方法
2018/04/21 Python
python安装本地whl的实例步骤
2019/10/12 Python
python opencv将表格图片按照表格框线分割和识别
2019/10/30 Python
Scrapy 配置动态代理IP的实现
2020/09/28 Python
python 输入字符串生成所有有效的IP地址(LeetCode 93号题)
2020/10/15 Python
Python实现微信表情包炸群功能
2021/01/28 Python
使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE
2013/01/23 HTML / CSS
CSS3中的@keyframes关键帧动画的选择器绑定
2016/06/13 HTML / CSS
APM Monaco中国官网:来自摩纳哥珠宝品牌
2017/12/27 全球购物
房地产融资计划书
2014/01/10 职场文书
政风行风自查自纠报告
2014/10/21 职场文书
Vue vee-validate插件的简单使用
2021/06/22 Vue.js
不负正版帝国之名 《重返帝国》引领SLG手游制作新的标杆
2022/04/07 其他游戏