CSS3中如何使元素曲线运动_css3实现曲线运动

作者：菜鸟追梦旅行 | 2024-03-18 23:24:29

踩

css3实现曲线运动

问题？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>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/266130