css3椭圆旋转

需求
1.实现元素沿椭圆轨迹均匀旋转
2.鼠标点击事件、移入暂停运动
3.元素由远到近逐渐增大

 

 

网上关于css3实现旋转的案例很多，我也是借鉴别人方法，这里不细说直接上代码，通过css3实现的旋转动画存在一个小问题，旋转元素是图片，在运动过程中图片会发生抖动现象，后来尝试用svg动画解决了此问题，具体内容见《svg实现沿椭圆轨迹旋转动画》

<div class="container">
    <!-- 旋转动画 -->
    <div class="animate">
      <div class="ball ball1">
        <img src="img/ball.jpg">
        <p>1</p>
      </div>
      <div class="ball ball2">
        <img src="img/ball.jpg">
        <p>2</p>
      </div>
      <div class="ball ball3">
        <img src="img/ball.jpg">
        <p>3</p>
      </div>
      <div class="ball ball4">
        <img src="img/ball.jpg">
        <p>4</p>
      </div>
      <div class="ball ball5">
        <img src="img/ball.jpg">
        <p>5</p>
      </div>
      <div class="ball ball6">
        <img src="img/ball.jpg">
        <p>6</p>
      </div>
    </div>
    <!-- 旋转动画结束 -->
  </div>

/* 旋转动画 */
.animate {
  width: 420px;
  height: 300px;
  border-radius: 50%;
  position: absolute;
  left: 10px;
  top: 20px;
  }
@keyframes animX{
  0% {left: -20px;}
100% {left: 340px;}
}
@keyframes animY{
  0% {top: -30px;}
100% {top: 200px;}
}
@keyframes scale {
  0% {
    transform: scale(0.7)
  }
  50% {
    transform: scale(1.2)
  }
  100% {
    transform: scale(0.7)
 }
}
.ball {
  width: 100px;
  height: 100px;
  position: absolute;
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  font-size: 12px;
}
.ball img:hover{
  transform: scale(1.2);
}
.ball img{
  width: 70px;
  height: 70px;
  margin-bottom: 10px;
}
/* 6个图x和y轴动画加起来是18s , 18s/6 等于 3s
每个球y轴动画延迟 从0递减3s,x轴与y轴相差动画时长的一半（9s/2） */
.ball1 {
  animation: animX 9s cubic-bezier(0.36, 0, 0.64, 1) -4.5s infinite alternate,
  animY 9s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate,
  scale 18s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;
}
.ball2 {
  animation: animX 9s cubic-bezier(0.36, 0, 0.64, 1) -7.5s infinite alternate,
  animY 9s cubic-bezier(0.36, 0, 0.64, 1) -3s infinite alternate,
  scale 18s cubic-bezier(0.36, 0, 0.64, 1) -3s infinite alternate;
}
.ball3 {
  animation: animX 9s cubic-bezier(0.36, 0, 0.64, 1) -10.5s infinite alternate,
  animY 9s cubic-bezier(0.36, 0, 0.64, 1) -6s infinite alternate,
  scale 18s cubic-bezier(0.36, 0, 0.64, 1) -6s infinite alternate;
}
.ball4 {
  animation: animX 9s cubic-bezier(0.36, 0, 0.64, 1) -13.5s infinite alternate,
  animY 9s cubic-bezier(0.36, 0, 0.64, 1) -9s infinite alternate,
  scale 18s cubic-bezier(0.36, 0, 0.64, 1) -9s infinite alternate;
}
.ball5 {
  animation: animX 9s cubic-bezier(0.36, 0, 0.64, 1) -16.5s infinite alternate,
  animY 9s cubic-bezier(0.36, 0, 0.64, 1) -12s infinite alternate,
  scale 18s cubic-bezier(0.36, 0, 0.64, 1) -12s infinite alternate;
}
.ball6 {
  animation: animX 9s cubic-bezier(0.36, 0, 0.64, 1) -19.5s infinite alternate,
  animY 9s cubic-bezier(0.36, 0, 0.64, 1) -15s infinite alternate,
  scale 18s cubic-bezier(0.36, 0, 0.64, 1) -15s infinite alternate;
}

var items = document.getElementsByClassName("ball");
//console.log(items)
for (var i = 0; i < items.length; i++) {
  items[i].addEventListener('click', function () {
    console.log(this)
  })
}
for (var i = 0; i < items.length; i++) {
  items[i].addEventListener('mouseover', function () {
    for (j = 0; j < items.length; j++) {
      items[j].style.animationPlayState = "paused";;
    }

  })
  items[i].addEventListener('mouseout', function () {
    for (j = 0; j < items.length; j++) {
      items[j].style.animationPlayState = "running";;
    }
  })
}

参考
[1] css3实现椭圆轨迹旋转

好记性不如烂笔头，总结和记录工作学习中的点点滴滴，如有不对之处还请指教。