html 椭圆特效,使用CSS3实现椭圆动画效果

写在前面的话：

有这样一个需求，在大屏中要实现几个球用椭圆形状的布局进行展示，展示的同时还要沿着椭圆轨道进行运动。经过 百度结合自身的思考之后给出了以下demo。

正文：

首先我们先写结构

类名为area的div为存放球类的容器，类名为ball的div为球

接着定义样式

.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;

}

目前得到的效果如下：

接着我们要将这六个球进行椭圆的排列并使其动起来：

分析过程：

椭圆轨迹的运动可以分解为左右反复运动和上下反复运动的叠加而形成的复合运动。知道了这一点之后我们就可以尝试使得一个球进行该运动

.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;

}

.area>.ball1{

animation: anmiteX 12s linear 0s infinite alternate,

anmiteY 12s linear 0s infinite alternate;

}

/* 动画 */

/* 在X轴上的移动 */

@keyframes anmiteX{

from{

left: 100px;

}