Demo

http://xuanfengge.com/demo/201506/spark/spark-button.html

效果

代码

/*按钮*/
.join {
	position: absolute;
	display: block;
	text-align: center;
	line-height: 40px;
	width: 148px;
	height: 40px;
	color: #fff5d1;
	border-radius: 20px;
	border: 1px solid #fff;
	font-size: 20px;
	text-decoration: none;
	top: 247px;
	left: 0px;
}
/*光点*/
.spark {
	position: absolute;
	width: 30px;
	height: 41px;
	background: url(http://appsearchcdn.baidu.com/statics/devplat/static/golden/img/spark_adce339.png) no-repeat;
	top: 227px;
	left: 6px;
	-webkit-animation-name: spark;
	-webkit-transform-origin: 50% 100%;
	-webkit-animation-duration: 8s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction: normal;
}
/*动画*/
@-webkit-keyframes 'spark' {
    0% {
        left: 6px;
        transform: rotate(0deg)
    }

    35% {
        left: 112px;
        transform: rotate(0deg)
    }

    50% {
        left: 112px;
        transform: rotate(180deg)
    }

    85% {
        left: 6px;
        transform: rotate(180deg)
    }

    100% {
        transform: rotate(360deg)
    }
}