关闭

css3做圆形轨迹移动动画

标签: css3动画
3379人阅读 评论(2) 收藏 举报
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title> css3圆形轨迹动画 </title>
<style type="text/css">
@keyframes animX{
	  0% {left: 0px;}
	100% {left: 500px;}
}
@keyframes animY{
	  0% {top: 0px;}
	100% {top: 500px;}
}

#ball {
	width: 20px;
	height: 20px;
	background-color: #f66;
	border-radius: 50%;
	position: absolute;
	animation: animX 4s cubic-bezier(0.36,0,0.64,1) -2s infinite alternate, animY 4s cubic-bezier(0.36,0,0.64,1)  0s infinite alternate;
}

#lopp {
	width: 498px;
	height: 498px;
	border: 2px solid #999;
	border-radius: 50%;
	position: absolute;
	left: 9px;
	top: 9px;
}

</style>
</head>
<body>
<div id="lopp"></div>
<div id="ball"></div>
</body>
</html>

2
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:15367次
    • 积分:297
    • 等级:
    • 排名:千里之外
    • 原创:10篇
    • 转载:1篇
    • 译文:0篇
    • 评论:69条
    文章分类
    最新评论