css3 星球椭圆运动轨迹

上一个项目里碰到了要写一个星球运动的动画,其中主要的点就是用css3如何实现椭圆运动。上网找了很久,看到一个“css3太阳系”的文章介绍,但可惜是正圆的,给人的感觉是平面,不适合。实在找不到,就自己想了些思路:

思路一:写个正圆的运动,然后用scale来变形。实践证明是不可行的,这样变形会导致里面的星球发生严重变形。

思路二:把星球同时做X轴和Y轴的位移运动。根据抛物线的原理,这个方案貌似可行。最后实践证明原理是这样,但有些地方需要留意下,否则会变成菱形运动了。

先看一下效果图吧:

css3星球椭圆运动

演示地址

失败实践:

先来看下椭圆的坐标示意图:

css3椭圆运动

所以,一开始的想法就是,从原点o出发(分别给x、y轴方向一个位移),然后分别在a、b、c点设置动画帧,改变他们的translate。但最终的实践证明,如果一开始同时改变x、y方向的位移,实际出来的轨迹是他们的对角线,而并非抛物线。

成功实践:

后来经高人指点,稍微换了一下思路,先看下坐标示意图:

css3椭圆运动

做椭圆运动的球体还是在原点O位置,但一开始做y轴方向的位移,到达d坐标时,再加上x轴方向的位移。怎么做单这点呢,只需要把x轴的方向的运动延迟四分之一的时间:

.div1{
    -webkit-animation:star_ani_02 16s 4s ease-in-out infinite;
}
.div2{
    -webkit-animation:star_ani_01 16s 0s ease-in-out infinite;
}

一个方向先运动起来,有了加速度,到四分之一时,另一个方向再从0加速,从而产生抛物轨迹。

下面看完整代码

HTML代码:

<div class="box">
    <div class="wrap-bg"></div>
    <div class="wrap-bg2"></div>
    
    <div class="wrap-bg3">
        <span></span>
    </div>
    
    <div class="wrap-icon wrap-icon1">
        <span><i></i></span>
    </div>

    <div class="wrap-icon wrap-icon2">
        <span><i></i></span>
    </div>

    <div class="wrap-icon wrap-icon3">
        <span><i></i></span>
    </div>

    <div class="wrap-sun"></div>

</div>

CSS3代码:

html{ -ms-text-size-adjust:100%; -webkit-text-size-adjust:100%;}
ul,li,div,p,body{ margin:0; padding:0; text-align:left;}
body, html{ 
    background:#001424;
    text-align: left;
    height: 100%;
    width: 100%;
    sans-serif;
    font-size:62.5%;
    font-weight: normal;
}
@-webkit-keyframes star_ani_00{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }   
}
@keyframes star_ani_00{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }   
}
@-webkit-keyframes star_ani_01{
    0%,100%{
        -webkit-transform: translateY(0rem);
    }
    50%{
        -webkit-transform: translateY(-35rem);
    }
}
@keyframes star_ani_01{
    0%,100%{
        transform: translateY(0rem);
    }
    50%{
       transform: translateY(-35rem);
    }
}
@-webkit-keyframes star_ani_02{
    0%,100%{
        -webkit-transform: translateX(0rem) scale(0.8);
    }    
    50%{
        -webkit-transform: translateX(10rem) scale(1);
    }
}
@keyframes star_ani_02{
    0%,100%{
        transform: translateX(0rem) scale(0.8);
    }    
    50%{
        transform: translateX(10rem) scale(1);
    }
}
@-webkit-keyframes star_ani_03{
    0%,100%{
        -webkit-transform: translateX(0rem);
    }
    50%{
        -webkit-transform: translateX(-36rem);
    }
}
@keyframes star_ani_03{
    0%,100%{
        transform: translateX(0rem);
    }
    50%{
        transform: translateX(-36rem);
    }
}

@-webkit-keyframes star_ani_04{
    0%,100%{
        -webkit-transform: translateY(0rem) scale(0.8);
    }    
    50%{
        -webkit-transform: translateY(10.5rem) scale(1);
    }
}
@keyframes star_ani_04{
    0%,100%{
        transform: translateY(0rem) scale(0.8);
    }    
    50%{
        transform: translateY(10.5rem) scale(1);
    }
}

@-webkit-keyframes star_ani_05{
    0%,100%{
        -webkit-transform: translateX(0rem);
    }
    50%{
        -webkit-transform: translateX(-26.5rem);
    }
}
@keyframes star_ani_05{
    0%,100%{
        transform: translateX(0rem);
    }
    50%{
        transform: translateX(-26.5rem);
    }
}

@-webkit-keyframes star_ani_06{
    0%,100%{
        -webkit-transform: translateY(0rem) scale(0.8);
    }    
    50%{
        -webkit-transform: translateY(8rem) scale(1);
    }
}
@keyframes star_ani_06{
    0%,100%{
        transform: translateY(0rem) scale(0.8);
    }    
    50%{
        transform: translateY(8rem) scale(1);
    }
}
.main{
    position: relative;
    height:100%;
}
.wrap-icon{
    position:absolute;
    background-size: 100%;
    background-repeat: no-repeat;
    left:50%;
    top: 12%;
    z-index: 2;
    opacity: 0;
}

.wrap-icon1{
    width: 2.7rem;
    height: 2.7rem;
    margin-left:-5.5rem;
    margin-top: 28rem;
    -webkit-animation:star_ani_00 0.5s 4s linear forwards;
    animation:star_ani_00 0.5s 4s linear forwards;
}
.wrap-icon1 span{
    width:2.7rem;
    height:2.7rem;
    display: block;
    -webkit-animation:star_ani_02 16s 4s ease-in-out infinite;
    animation:star_ani_02 16s 4s ease-in-out infinite;
}
.wrap-icon1 i{
    width:1.5rem;
    height:1.5rem;
    border-radius:1.5rem;
    display: block;
    background:#f60;
    background-size: 100% 100%;
    -webkit-animation:star_ani_01 16s 0s ease-in-out infinite;
    animation:star_ani_01 16s 0s ease-in-out infinite;
}

.wrap-icon2{
    width: 2.7rem;
    height: 2.7rem;
    margin-left: 17.8rem;
    margin-top: 8rem;
    -webkit-animation:star_ani_00 0.5s 5s linear forwards;
    animation:star_ani_00 0.5s 5s linear forwards;
}
.wrap-icon2 span{
    width:2.7rem;
    height:2.7rem;
    display: block;
    -webkit-animation:star_ani_03 20s 0s ease-in-out infinite;
    animation:star_ani_03 20s 0s ease-in-out infinite;
}
.wrap-icon2 i{
    width:1.5rem;
    height:1.5rem;
    border-radius:1.5rem;
    display: block;
    background:#f60;
    background-size: 100% 100%;
    -webkit-animation:star_ani_04 20s 5s ease-in-out infinite;
    animation:star_ani_04 20s 5s ease-in-out infinite;
}


.wrap-icon3{
    width: 2.7rem;
    height: 2.7rem;
    margin-left: 12.4rem;
    margin-top: 9rem;
    -webkit-animation:star_ani_00 0.5s 2.5s linear forwards;
    animation:star_ani_00 0.5s 2.5s linear forwards;
}
.wrap-icon3 span{
    width:2.7rem;
    height:2.7rem;
    display: block;
    -webkit-animation:star_ani_05 10s 0s ease-in-out infinite;
    animation:star_ani_05 10s 0s ease-in-out infinite;
}
.wrap-icon3 i{
    width:2rem;
    height:2rem;
    border-radius:1rem;
    display: block;
    background:#f60;
    background-size: 100% 100%;
    -webkit-animation:star_ani_06 10s 2.5s ease-in-out infinite;
    animation:star_ani_06 10s 2.5s ease-in-out infinite;
}
.wrap-bg{
    width:28rem;
    height:28rem;
    position: absolute;
    top:12%;
    left:50%;
    margin-left:-14rem;
    border:0.1rem solid #aaa;
    border-radius:28rem;
    -webkit-transform:scale3d(1,0.3,1);
    transform:scale3d(1,0.3,1);
}
.wrap-bg2{
    width:36rem;
    height:36rem;
    position: absolute;
    top:12%;
    left:50%;
    margin-left:-18rem;
    margin-top:-4rem;
    border:0.1rem solid #aaa;
    border-radius:28rem;
    -webkit-transform:scale3d(1,0.3,1);
    transform:scale3d(1,0.3,1);
}
.wrap-bg3{
    width:32rem;
    height:32rem;
    position: absolute;
    top:12%;
    left:50%;
    margin-left:-16rem;
    margin-top:-3rem;
    -webkit-transform:rotate(4deg);
    transform:rotate(4deg);
}
.wrap-bg3 span{
    display: block;
    width:100%;
    height:100%;
    border:0.1rem solid #aaa;
    border-radius:28rem;
    -webkit-transform:scale3d(0.32,1,1);
    transform:scale3d(0.32,1,1);
}
.wrap-sun{
    position: absolute;
    width:5.3rem;
    height:5.3rem;
    top:12%;
    left:50%;
    margin-left:-2.6rem;
    margin-top:11rem;
    background:#39F;
    background-size: 100%;
    border-radius:50%;
}


原文链接:HelloWeb前端网 » css3 星球椭圆运动轨迹 » 感谢您的浏览,希望能有所帮助。

欢迎您加入“Helloweb” 学习交流群:HelloWeb-学习交流群 196291215 共同交流并结识同行,在这里说出您的收获与感想或有什么不同的观点,我们期待您的留言,分享,让我们一起进步!

喜欢 ()or分享