• 不断学习才有回报,学无止境!

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

DIV+CSS技巧发现 箭翎 1259次浏览 0个评论 扫描二维码

效果

spark

代码

.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协议进行授权 , 转载请注明光点沿圆角按钮运动轨迹动画
喜欢 (4)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址