CSS3中如何使元素曲线运动

最新推荐文章于 2025-06-04 18:31:15 发布

黯雅悸动

最新推荐文章于 2025-06-04 18:31:15 发布

阅读量6.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： --------《CSS》文章标签： jquery css CSS3中如何使元素曲线运动 jquery.path.js

本文链接：https://blog.youkuaiyun.com/Mr_li13/article/details/50750431

--------《CSS》专栏收录该内容

3 篇文章

订阅专栏

问题？CSS3中如何使元素曲线运动

原理：因为在css属性中是没有曲线运动的属性，我们就需要用到一个jquery插件jquery.path.js

下载：点击打开下载链接

例子：在观望中有许多的曲线运动例子，直接复制过来用即可，以下也是本人复制过来的。大家可以借鉴一下

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
	<style type="text/css">
		div{
			width: 80px;
			height: 80px;
			border-radius: 50%;
			background-color: blue;
			position: absolute;
			top: 200px;
			left: 600px;

		}	
	</style>
	<script src="js/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/jquery.path.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
	$(document).ready(function(){
		run();
		function run(){
			//定义贝塞尔曲线(曲线运动)
			/*var bezier_params = {
			    start: { 
			      x: 185, 
			      y: 185, 
			      angle: 10
			    },  
			    end: { 
			      x:540,
			      y:110, 
			      angle: -10, 
			      length: 0.25
			    }
			  }
			  //animation时候开始执行
			$("div").animate({path : new $.path.bezier(bezier_params)},2000,function(){run();})*/

			/*圆周运动*/
			var arc_params = {
		    center: [285,185],  
		        radius: 200,    
		        start: 0,
		        end: 1,
		        dir: -1
		  	}
		  
			$("div").animate({path : new $.path.arc(arc_params)},2000,function(){run()});
		}
	});
		
	</script>
</head>
<body>
	<div></div>
</body>
</html>