• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > JS应用 > CSS3动画:CSS3+jQuery实现旋转的球

    CSS3动画:CSS3+jQuery实现旋转的球

    作者: 分类:JS应用 点击: 7,023 次
    wordpress CMS主题:ssmay主题

      通过纯CSS3,我们就可以实现非常多的动画效果。如果把CSS3与JQUERY结合一下,那就可以实现更加生动的动画效果。本文,我们就来看看如何通过CSS3+jQuery来完成一个动态旋转的球的效果。这里,我们会用到CSS3的几个3D属性:transform、translateZ、perspective、rotateY、rotateX、transform-origin、transform-style等,还要用到JS的几个数学函数:sin、cos、setInterval等。以下,只对代码中的CSS3的相关属性做相应的注释。

      旋转的球 演示地址

      1、html代码:

      <div class="one">
      <div class="out">
      <div class="ball">
      </div>
      </div>
      </div>

      2、css代码:

      .one{
      width:400px; height:400px; border:1px solid #ccc; margin:10px auto;
      position:relative;
      perspective:1500px; ////设置景深,这个是3D效果最重要的属性,如果没有,就不会出现3D效果
      transform-style:preserve-3d;  //让子元素保持 3D 效果
      }
      .out{
      width:100%;height:100%;position:relative;
      transform-style:preserve-3d;
      transform:translateZ(-800px);  //translateZ 使用out 元素 延Z轴移动 -800px  ,相应地可以看到变小效果,如果是正数,会变大

      }

      .ball{
      width:400px; height:400px;position:relative;
      transform-style:preserve-3d;
      }

      .ball li{
      width:60px; height:25px; background:blue;position:absolute;
      border-radius:7px;  //圆角
      box-shadow:0 0 7px #aa00ee; //边框显示阴影
      background-clip:content-box; //背景只在内容里显示,不在边框和内边距中显示
      padding:3px;
      color:#fff;
      line-height:25px; text-align:center;
      transform-origin:left;  //以 左边为基点,如果 li 转换位置的话,
      }

      3、JS 代码:

      $(function(){
      var ball = $(".ball");

      var d_ball = new draw_ball();  //实例化对像draw_ball
      d_ball.angle();// 执行对象的方法 angle()
      var radius = d_ball.radius; //球的半径

      //绘制球上面的小方块
      for(var i=0; i<d_ball.length; i++){
      var theta=d_ball.angles[i].theta; //  小方块 的 theta 角
      var phi=d_ball.angles[i].phi;  //  小方块 的 phi 角
      var z = radius*Math.sin(theta)*Math.cos(phi); //计算出 小方块 转动的 z 轴
      var x = radius*Math.sin(theta)*Math.sin(phi)+radius; //计算出 小方块 转动的 x 轴
      var y = radius*Math.cos(theta)+radius; //计算出 小方块 转动的 y 轴
      var div_ha = '<li class="ha'+i+'">hello</li>';
      ball.append(div_ha);   //循环 向球中添加小方块
      var nn = (i==24)?1:z;
      $(".ha"+i).css({ //设置每一个小方块的CSS样式
      left:x, top:y,
      transform:'translateZ('+nn+'px) rotateY('+phi+'rad) rotateX('+(theta-Math.PI/2)+'rad)' 
      });
      }

      //转动球
      var numm = 0;
      var t = setInterval(rond,100);  //让球每100毫秒转动一次
      ball.mouseover(function(){
      clearInterval(t);  //当鼠标移到球上时,停止转动
      });
      ball.mouseout(function(){
      t = setInterval(rond,100); //当鼠标移出球时,恢复转动
      });
      function rond(){  //运动函数
      numm+=3;
      ball.css({
      transform:'rotateY('+numm+'deg)'   // 延Y轴转动
      });

      }

      });

      // 绘球 方法,让25个小方块附在球体上,每7行,第1行1个,第2行3个,第3行5个,第4行7个,第5行5个,第6行3个,第7行1个
      function draw_ball(){  //对象方法
      this.radius = 200; //半径默认是 200
      this.angles = [];
      this.length = 25;  //小方块的数量,让

      this.angle=function(){  //设置每一个小广场的位置
      var num = 0;
      for(var i=0; i<this.length; i++){
      var obj={};
      if(i==0){  //第一行
      obj.theta=0; //theta角共180度,从0度开始
      obj.phi=0; //phi角 是360度,即一圈,从0度开始
      }
      if(i>0&&i<4){ //第二行
      obj.theta=Math.PI/6*1; //共7行,所以,中间角度会有6次变化,下面以次类推
      obj.phi=Math.PI*2/3*num; //第二行是3个小方块,所以360度/3,下面以次类推
      num++
      }
      if(i>3&&i<9){
      obj.theta=Math.PI/6*2;
      obj.phi=Math.PI*2/5*num;
      num++
      }
      if(i>8&&i<16){
      obj.theta=Math.PI/6*3;
      obj.phi=Math.PI*2/7*num;
      num++
      }
      if(i>15&&i<21){
      obj.theta=Math.PI/6*4;
      obj.phi=Math.PI*2/5*num;
      num++
      }
      if(i>20&&i<24){
      obj.theta=Math.PI/6*5;
      obj.phi=Math.PI*2/3*num;
      num++
      }
      if(i>23){
      obj.theta=Math.PI;
      obj.phi=0;
      }
      this.angles.push(obj);
      }
      }
      }

      这样,旋转的球就实现了。默认是不停地旋转,如果把鼠标放在球上,就会停止旋转,如果移出鼠标,就会继续旋转。当然,你还可以对这个安全做进一步地完善,如:旋转方向受鼠标移动方向影响、旋转快慢受鼠标移动快慢影响……



      QQ二维码

    文章作者:高时银博客
    本文地址:http://wanlimm.com/77201512194922.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    This site uses Akismet to reduce spam. Learn how your comment data is processed.