php移动轨迹,光点沿圆角按钮运动轨迹动画

效果

代码

.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)

}

箭翎 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明光点沿圆角按钮运动轨迹动画！