wordpress CMS主题 微信
Home > HTML5与CSS3.0, JS应用 > CSS3动画:CSS3+jQuery实现旋转的球

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

高时银博客 HTML5与CSS3.0,JS应用 点击: 2,528 次 0 0
  • 标签:
  • 通过纯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);
    }
    }
    }

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


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

    目前还没有评论。赶快来坐沙发吧。

    发表评论