CSS实现元素绕椭圆旋转并在后方渐隐

 实现该需求需要理解一点 animation

首先

@keyframes

 

@keyframes规定动画关键帧：比如上方

        从开始的0%——100%

0%从盒子的 离左边0px  上边0px的地方开始运动

之后的同理，这里可以看作一个

 类似这样子的坐标轴

然后在需要制作动画的元素css中编写动画：

        

    div{
        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;
    }

该div元素定义了三个动画，并且会同时运行这三种动画，

这里 

        animX为名称 后面的是animation的属性。

        可以参考animation详解

这里的代码与最上方展示的不同源,如果动画这样子写那么

关键帧应该如下：

        这里只列举了animX,animY名称的动画，scale暂未列出 。

@keyframes animX{
    0% {left: 0px;}
  100% {left: 600px;}
}
@keyframes animY{
    0% {top: 200px;}
  100% {top: 0px;}
}

下面是具体css与html代码：

        

                <div className='ball-box'>
                    <div class="ball">1</div>
                    <div class="ball">2</div>
                    <div class="ball">3</div>
                    <div class="ball">4</div>
                    <div class="ball">5</div>
                    <div class="ball">6</div>
                    <div class="ball">7</div>
                </div>

@keyframes animX{
    0% {left: 0px;}
  100% {left: 500px;}
}
@keyframes animY{
    0% {top: 200px;}
  100% {top: 0px;}
}
@keyframes scale {

  0% {
    opacity: 1;

  }
  25%{
    opacity: 0.75;
  }
  50% {
    opacity: 0;

  }
  75%{
    opacity: 0.75;
  } 
  100% {
    opacity: 1;
 }
}

.ball {
	width: 100px;
	height: 100px;
	background-color: rgb(76, 246, 249);
	border-radius: 50%;
	position: absolute;
    color:#fff;
    font-size:22px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.ball-box{
    position: absolute;
    top: 10%;
    left: 10%;

    div:nth-child(1){
        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;
    }
     div:nth-child(2){
        animation: animX 10s cubic-bezier(0.36, 0, 0.64, 1) -7.857s infinite alternate,
        animY 10s cubic-bezier(0.36, 0, 0.64, 1) -2.857s infinite alternate,
        scale 20s cubic-bezier(0.36, 0, 0.64, 1) -2.857s infinite alternate;
    }
     div:nth-child(3){
        animation: animX 10s cubic-bezier(0.36, 0, 0.64, 1) -10.714s infinite alternate,
        animY 10s cubic-bezier(0.36, 0, 0.64, 1) -5.714s infinite alternate,
        scale 20s cubic-bezier(0.36, 0, 0.64, 1) -5.714s infinite alternate;
    }
     div:nth-child(4){
        animation: animX 10s cubic-bezier(0.36, 0, 0.64, 1) -13.571s infinite alternate,
        animY 10s cubic-bezier(0.36, 0, 0.64, 1) -8.571s infinite alternate,
        scale 20s cubic-bezier(0.36, 0, 0.64, 1) -8.571s infinite alternate;
    }
     div:nth-child(5){
        animation: animX 10s cubic-bezier(0.36, 0, 0.64, 1) -16.428s infinite alternate,
        animY 10s cubic-bezier(0.36, 0, 0.64, 1) -11.428s infinite alternate,
        scale 20s cubic-bezier(0.36, 0, 0.64, 1) -11.428s infinite alternate;
    }
     div:nth-child(6){
        animation: animX 10s cubic-bezier(0.36, 0, 0.64, 1) -19.285s infinite alternate,
        animY 10s cubic-bezier(0.36, 0, 0.64, 1) -14.285s infinite alternate,
        scale 20s cubic-bezier(0.36, 0, 0.64, 1) -14.285s infinite alternate;
    }
     divl:nth-child(7){
        animation: animX 10s cubic-bezier(0.36, 0, 0.64, 1) -22.142s infinite alternate,
        animY 10s cubic-bezier(0.36, 0, 0.64, 1) -17.142s infinite alternate,
        scale 20s cubic-bezier(0.36, 0, 0.64, 1) -17.142s infinite alternate;
    }

}

                                        参考：椭圆围绕旋转