可视化大屏-05

实现椭圆形，定时旋转的大屏

专家辅助决策录制

使用以下代码能将正圆的旋转，设置成倾斜的椭圆，并且有旋转效果

      transform: rotate(0deg) scale(1.5, 0.38);
      transform-origin: center;

以下代码实现椭圆的模块选择，由远到近的效果

.area > .ball1 {
  animation: anmiteX 3s cubic-bezier(0.6, 0.3, 0.3, 0.6) -1.53s infinite alternate,
    anmiteY 3s cubic-bezier(0.6, 0.3, 0.3, 0.6) 0s infinite alternate, 
    scale 6s cubic-bezier(0.6, 0.3, 0.3, 0.6) 0s infinite alternate;
}

.area > .ball2 {
  animation: anmiteX 3s cubic-bezier(0.6, 0.3, 0.3, 0.6) -2.38s infinite alternate,
    anmiteY 3s cubic-bezier(0.6, 0.3, 0.3, 0.6) -0.87s infinite alternate,
    scale 6s cubic-bezier(0.6, 0.3, 0.3, 0.6) -0.87s infinite alternate;
}

.area > .ball3 {
  animation: anmiteX 3s cubic-bezier(0.6, 0.3, 0.3, 0.6) -3.23s infinite alternate,
    anmiteY 3s cubic-bezier(0.6, 0.3, 0.3, 0.6) -1.72s infinite alternate,
    scale 6s cubic-bezier(0.6, 0.3, 0.3, 0.6) -1.72s infinite alternate;
}

.area > .ball4 {
  animation: anmiteX 3s cubic-bezier(0.6, 0.3, 0.3, 0.6) -4.08s infinite alternate,
    anmiteY 3s cubic-bezier(0.6, 0.3, 0.3, 0.6) -2.57s infinite alternate,
    scale 6s cubic-bezier(0.6, 0.3, 0.3, 0.6) -2.57s infinite alternate;
}

.area > .ball5 {
  animation: anmiteX 3s cubic-bezier(0.6, 0.3, 0.3, 0.6) -4.93s infinite alternate,
    anmiteY 3s cubic-bezier(0.6, 0.3, 0.3, 0.6) -3.42s infinite alternate,
    scale 6s cubic-bezier(0.6, 0.3, 0.3, 0.6) -3.42s infinite alternate;
}

.area > .ball6 {
  animation: anmiteX 3s cubic-bezier(0.6, 0.3, 0.3, 0.6) -5.78s infinite alternate,
    anmiteY 3s cubic-bezier(0.6, 0.3, 0.3, 0.6) -4.27s infinite alternate,
    scale 6s cubic-bezier(0.6, 0.3, 0.3, 0.6) -4.27s infinite alternate;
}

.area > .ball7 {
  animation: anmiteX 3s cubic-bezier(0.6, 0.3, 0.3, 0.6) -6.63s infinite alternate,
    anmiteY 3s cubic-bezier(0.6, 0.3, 0.3, 0.6) -5.12s infinite alternate,
    scale 6s cubic-bezier(0.6, 0.3, 0.3, 0.6) -5.12s infinite alternate;
}

/* 动画 */

/* 在X轴上的移动 */
@keyframes anmiteX {
  from {
    left: calc(42% - 578.5px);
  }
  to {
    left: calc(43% + 578.5px);
  }
}
/* 在轴上Y的移动 */
@keyframes anmiteY {
  from {
    top: calc(38% - 195px);
  }
  to {
    top: calc(38% + 195px);
  }
}

以上代码由原先的6个模块（以下）改成7个模块

/* 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;
// }