首页 > 建站教程 > CSS3+HTML5 >  css3小球沿椭圆运动并近大远小代码正文

css3小球沿椭圆运动并近大远小代码

1.png


利用css3的animation实现的小球沿着椭圆轨道进行圆周运动,并且实现了近大远小的代码:


css3代码:

.area{
    width: 1200px;
    height: 800px;
    background: green;
}
.area>.ball{
    width: 60px;
    height: 60px;
    position: absolute;
    border-radius: 60px;
    background-image: linear-gradient(to top,blue,lightblue);
    box-shadow: 0px 0px 20px #0000ff5c;
}
/* 6个球 总共运行一圈的时间为24秒  每个球的间隔时间为 4秒*/
.area>.ball1{
    animation: anmiteX 12s cubic-bezier(0.6,0.3,0.3,0.6) -6s infinite alternate,
    anmiteY 12s cubic-bezier(0.6,0.3,0.3,0.6) 0s infinite alternate, 
    scale 24s cubic-bezier(0.6,0.3,0.3,0.6) 0s infinite alternate;
}
 .area>.ball2{
    animation: anmiteX 12s cubic-bezier(0.6,0.3,0.3,0.6) -10s infinite alternate,
    anmiteY 12s cubic-bezier(0.6,0.3,0.3,0.6) -4s infinite alternate,
    scale 24s cubic-bezier(0.6,0.3,0.3,0.6) -4s infinite alternate;
}
.area>.ball3{
    animation: anmiteX 12s cubic-bezier(0.6,0.3,0.3,0.6) -14s infinite alternate,
    anmiteY 12s cubic-bezier(0.6,0.3,0.3,0.6) -8s infinite alternate,
    scale 24s cubic-bezier(0.6,0.3,0.3,0.6) -8s infinite alternate;
}
.area>.ball4{
    animation: anmiteX 12s cubic-bezier(0.6,0.3,0.3,0.6) -18s infinite alternate,
    anmiteY 12s cubic-bezier(0.6,0.3,0.3,0.6) -12s infinite alternate,
    scale 24s cubic-bezier(0.6,0.3,0.3,0.6) -12s infinite alternate;
}
.area>.ball5{
    animation: anmiteX 12s cubic-bezier(0.6,0.3,0.3,0.6) -22s infinite alternate,
    anmiteY 12s cubic-bezier(0.6,0.3,0.3,0.6) -16s infinite alternate,
    scale 24s cubic-bezier(0.6,0.3,0.3,0.6) -16s infinite alternate;
}
.area>.ball6{
    animation: anmiteX 12s cubic-bezier(0.6,0.3,0.3,0.6) -26s infinite alternate,
    anmiteY 12s cubic-bezier(0.6,0.3,0.3,0.6) -20s infinite alternate,
    scale 24s cubic-bezier(0.6,0.3,0.3,0.6) -20s infinite alternate;
}
 /* 动画 */
/* 在X轴上的移动 */
@keyframes  anmiteX{
    from{
        left: 100px;
    }
    to{
        left: 1000px;
    }
}
/* 在轴上Y的移动 */
@keyframes  anmiteY{
    from{
        top: 100px;
    }
    to{
        top: 600px;
    }
}
/* 对球进行放大和缩小在视觉上进行远近的模拟 */
@keyframes  scale{
    0%{
        transform: scale(0.7,0.7);
    }
    50%{
        transform: scale(1.2,1.2);
    }
    100%{
        transform: scale(0.7,0.7);
    }
}


html代码:

<div class="area">
    <div class="ball ball1"></div>
    <div class="ball ball2"></div>
    <div class="ball ball3"></div>
    <div class="ball ball4"></div>
    <div class="ball ball5"></div>
    <div class="ball ball6"></div>
</div>