css实现车轨动画转弯,css3实现沿椭圆轨迹旋转动画

需求

1.实现元素沿椭圆轨迹均匀旋转

2.鼠标点击事件、移入暂停运动

3.元素由远到近逐渐增大

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

1

2

3

4

5

6

/* 旋转动画 */

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

}

})

}

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