css3做圆形轨迹移动动画

最新推荐文章于 2024-05-30 10:50:01 发布

天际的海浪

最新推荐文章于 2024-05-30 10:50:01 发布

阅读量1.3w

点赞数 6

文章标签： css3 动画

本文链接：https://blog.csdn.net/jslang/article/details/52711046

版权

<!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>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

天际的海浪

关注关注

6
点赞
踩
20

收藏

觉得还不错? 一键收藏
打赏
5
评论
css3做圆形轨迹移动动画

css3圆形轨迹动画 @keyframes animX{ 0% {left: 0px;} 100% {left: 500px;}}@keyframes animY{ 0% {top: 0px;} 100% {top: 500px;}}#ball { width: 20px; height: 20px; background-color: #f66; borde
复制链接

扫一扫