在一个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;
	}
}