<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>圆形环绕</title>
<style type="text/css">
@keyframes animX{
0% {left: 0px;}
100% {left: 500px;}
}
@keyframes animY{
0% {top: 0px;}
100% {top: 300px;}
}
@keyframes scale {
0% {
transform: scale(0.7)
}
50% {
transform: scale(1)
}
100% {
transform: scale(0.7)
}
}
.ball {
width: 100px;
height: 100px;
background-color: #f66;
border-radius: 50%;
position: absolute;
color:#fff;
font-size:22px;
display:flex;
align-items:center;
justify-content:center;
}
/*7个圆,x和y轴动画加起来是20s , 20/7 约等于 2.857 每个球y轴 从0递减2.857,x轴与y差10/2s*/
.ball1 {
animation: animX 10s cubic-bezier(0.36, 0, 0.64, 1) -5s infinite alternate,
animY 10s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate,
scale 20s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;
}
.ball2 {
animation: animX 10s cubic-bezier(0.36, 0, 0.64, 1) -8.3s infinite alternate,
animY 10s cubic-bezier(0.36, 0, 0.64, 1) -3.3s infinite alternate,
scale 20s cubic-bezier(0.36, 0, 0.64, 1) -3.3s infinite alternate;
}
.ball3 {
animation: animX 10s cubic-bezier(0.36, 0, 0.64, 1) -11.6s infinite alternate,
animY 10s cubic-bezier(0.36, 0, 0.64, 1) -6.6s infinite alternate,
scale 20s cubic-bezier(0.36, 0, 0.64, 1) -6.6s infinite alternate;
}
.ball4 {
animation: animX 10s cubic-bezier(0.36, 0, 0.64, 1) -14.9s infinite alternate,
animY 10s cubic-bezier(0.36, 0, 0.64, 1) -9.9s infinite alternate,
scale 20s cubic-bezier(0.36, 0, 0.64, 1) -9.9s infinite alternate;
}
.ball5 {
animation: animX 10s cubic-bezier(0.36, 0, 0.64, 1) -18.2s infinite alternate,
animY 10s cubic-bezier(0.36, 0, 0.64, 1) -13.2s infinite alternate,
scale 20s cubic-bezier(0.36, 0, 0.64, 1) -13.2s infinite alternate;
}
.ball6 {
animation: animX 10s cubic-bezier(0.36, 0, 0.64, 1) -21.5s infinite alternate,
animY 10s cubic-bezier(0.36, 0, 0.64, 1) -16.5s infinite alternate,
scale 20s cubic-bezier(0.36, 0, 0.64, 1) -16.5s infinite alternate;
}
.ball7 {
animation: animX 10s cubic-bezier(0.36, 0, 0.64, 1) -24.8s infinite alternate,
animY 10s cubic-bezier(0.36, 0, 0.64, 1) -19.8s infinite alternate,
scale 20s cubic-bezier(0.36, 0, 0.64, 1) -19.8s infinite alternate;
}
</style>
</head>
<body>
<div class="ball ball1">1</div>
<div class="ball ball2">2</div>
<div class="ball ball3">3</div>
<div class="ball ball4">4</div>
<div class="ball ball5">5</div>
<div class="ball ball6">6</div>
</body>
</html>
