【轨迹动画css】不规则轨迹动画css教程，弹球，客服广告悬浮层都可以用

小demo如下，可更具自己需求修改：

css

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

#ball {
    width: 20px;
    height: 20px;
    background-color: #f66;
    border-radius: 50%;
    position: relative;
    /* animation: animX 4s cubic-bezier(0.36,0,0.64,1) -2s infinite alternate, animY 4s cubic-bezier(0.36,0,0.64,1)  0s infinite alternate;  */
    /*圆形运动结束*/
   /* animation: animX 4s cubic-bezier(0.36,0,0.64,1) 0s infinite alternate, animY 4s cubic-bezier(0.36,0,0.64,1)  0s infinite alternate; */
    /*直线往返运动结束*/
    /*animation: animX 4s cubic-bezier(1,0,0,1) -2s infinite alternate, animY 4s cubic-bezier(1,0,0,1)  0s infinite alternate;*/
    /*圆角正方形运动结束*/
   animation: animX 8s cubic-bezier(0,0,0,1) -2s infinite alternate, animY 4s cubic-bezier(0,0,0,1)  0s infinite alternate;
}  

/*#lopp {
    width: 498px;
    height: 498px;
    border: 0px solid #999;
    border-radius: 50%;
    position: absolute;
    left: 9px;
    top: 9px;
}  */

html

<div id="lopp"></div>
<div id="ball"></div>
<div id="ball"></div>
<div id="ball"></div>
<div id="ball"></div>
<div id="ball"></div> 

效果，红色线条是运动的轨迹：