当前位置:首页 > 编程教程 > jQuery技术文章 > jQuery实现炫丽的3d旋转星空效果

jQuery实现3d旋转星空效果实例代码

  • 发布时间:
  • 作者:码农之家
  • 点击:162

这篇文章主要知识点是关于jQuery、炫丽、3d、旋转星空、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

锋利的jQuery
锋利的jQuery全书第2版
  • 类型:jQuery大小:194.9 MB格式:PDF作者:单东林 张晓菲 魏
立即下载

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

本文实例讲述了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程序设计有所帮助。

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

您可能感兴趣的文章:

  • 实例详解jQuery和HTML5实现WebGL高性能烟花绽放动画效果
  • 使用jquery实现带渐显效果的选项卡方法步骤
  • jquery实现导航菜单伸缩效果
  • jquery插件dialog实现弹框效果的实例内容
  • jquery Tab效果和动态加载示例代码
  • 相关电子书
    学习笔记
    网友NO.391267

    jQuery实现的3D版图片轮播示例【滑动轮播】

    本文实例讲述了jQuery实现的3D版图片轮播。分享给大家供大家参考,具体如下: 这个是用了3张图,来回滑动,类似一个圆圈(不晓得这个 怎么上动图啊!!!!) 图就是这么个图,但是他是可以滑动的(不好描述啊!!) 贴代码比较方便。。。 div class="banner" div class="banner_li left" img src="2.jpg" / /div div class="banner_li active" img src="img/borderlands_tiny_tina.jpg" / /div div class="banner_li right" img src="img/lang_yie_ar_kung_fu.jpg" / /div/div 布局就是这么个布局,自己找图片替换一下吧 重点是css部分的css3的一些属性,灵活运用transform和transition *{ margin: 0; padding: 0;}.banner{ width: 100%; height: 3rem; position: relative; overflow: hidden; padding:.2rem; box-sizing: border-box; margin-top: 1rem; font-size: .1rem;}.banner .banner_li,.banner .banner_li img{ width: 100%; height: 2.58rem; transition: all 0.3s ease 0s;}.banner .banner_li{ position: absol……

    网友NO.486158

    jQuery实现3D文字特效的方法

    本文实例讲述了jQuery实现3D文字特效的方法。分享给大家供大家参考。具体如下: 这款基于jQuery的3D文字特效演示,不是真正的3D,是由多个文字形成的3D效果,如果首次加载网页出错的话,请刷新一下页面,当然在使用中不会出现此问题。 复制代码 代码如下: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" html head meta http-equiv="Content-type" content="text/html; charset=utf-8" / titlejQuery 3D文字/title style type="text/css" body{ font-family: Arial, "MS Trebuchet", sans-serif; background-color: #111; } #list{ margin:0 auto; height:600px; width:600px; overflow:hidden; position:relative; background-color: #000; }#list ul,#list li{ list-style:none; margin:0; padding:0; } #list a{ position:absolute; text-decoration: none; color:#666; } #list a:hover{ color:#ccc; } /style script src="/ajaxjs/jquery1.3.2.js" type="text/javascript"/script /head ……

    网友NO.560422

    jQuery插件slicebox实现3D动画图片轮播切换特效

    漂亮jQuery 3D动画图片轮播切换特效插件jquery.slicebox.js,基于jQuery,插件采用CSS 3D 动画效果,支持事件Callback调用,支持参数自定义配置,如:speed:600 切换速度、autoplay:true 是否自动播放,在浏览器兼容方面,需要浏览器支持CSS3变换变形属性,不支持的将看不到3D特效,推荐学习下代码。 使用方法: 1.加载插件和jQuery link type="text/css" rel="stylesheet" href="css/slicebox.css" / script type="text/javascript" src="js/modernizr.js"/script script type="text/javascript" src="js/jquery8.js"/script script type="text/javascript" src="js/jquery.slicebox.js"/script 2.HTML内容,HTML头部需要采用HTML5头 !DOCTYPE html ul id="sb-slider" class="sb-slider" li img src="images/1.jpg" alt="image1"/ /li li img src="images/2.jpg" alt="image2"/ /li li img src="images/3.jpg" alt="image2"/ /li li img src="images/4.jpg" alt="image2"/ /li li img src="images/5.jpg" alt="image2"/ /li /ul div span oncli……

    <
    1
    >

    Copyright 2018-2020 www.xz577.com 码农之家

    投诉 / 推广 / 赞助:QQ:520161757