需求
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