在一个app上看到这个效果，觉得好看，就把它做出来。刚开始想用缩放（transform:scale）做出来，结果是个残次品，因为缩放会把边框的线给压缩了，变成断裂的虚线，出来的效果就不好看。 没办法了，只能通过控制高度或宽度实现“开花”的效果，但是有个bug，这里我是通过控制宽度实现的，所以会产生向右移动的情况。 要解决这个问题只能给父元素再加个动画了，子元素往右移动，父元素就往左移动，这样，它就不动了（误：振动）。

/*html*/
<div class="parent">
  <div class="child one"></div>
 <div class="child two"></div>
 <div class="child three"></div>
</div>

/*css*/
.parent{
  margin:0 auto;
  position:relative;
  width:100px;
  height:100px;
 left:0;
 animation:parent 1s linear 0s infinite alternate;
}
.child{
 position: absolute;
 height:100px;
 width:10px;
 box-sizing:border-box;
  border:1px solid #135790;
 border-radius: 50%;
 animation:child 1s linear 0s infinite alternate;
}
.one{
  transform:rotate(30deg);
}
.two{
  transform:rotate(150deg);
}
.three{
 transform:rotate(270deg);
}
@keyframes child{
 100%{
   width:50px;
 }
}
@keyframes parent{
  100%{
   left:-18px;
 }
}