svg+css实现老人赶车马拉车动画效果代码-html代码-BFW代码库

svg+css实现老人赶车马拉车动画效果代码

代码语言：html

所属分类：动画

代码描述：svg+css实现老人赶车马拉车动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
<style>
body{
	background:#666;
}
svg{
	position:fixed;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	width:90vw;
	max-width:800px;
}
</style>




</head>

<body >
  <svg class="scene" viewBox="0 0 800 600">
	<path class="ground" d="M100 432 H 715" stroke="rgb(35,35,35)" stroke-width="4" />

	<path class="wheelFrontB" fill="rgb(35,35,35)" d="M 517 430 A 1 1 0 0 0 517 360 A 1 1 0 0 0 517 430 M 517 407 L 523 422 Q 517 424 511 422 Z M 517 383 L 511 368 Q 517 366 523 368 Z M 505 395 L 490 401 Q 488 395 490 389 Z M 529 395 L 544 389 Q 546 395 544 401 Z M 508.5 403.5 L 502.2 418.3 Q 496.5 415.5 493.7 409.8 Z M 525.5 386.5 L 531.8 371.7 Q 537.5 374.5 540.3 380.2 Z M 508.5 386.5 L 493.7 380.2 Q 496.5 374.5 502.2 371.7 Z M 525.5 403.5 L 540.3 409.8 Q 537.5 415.5 531.8 418.3 Z">
		<animateTransform attributeName="transform" type="rotate" values="0 517 395; -360 517 395" dur="2.6s" repeatCount="indefinite" />
	</path>
	<path class="wheelBackB" fill="rgb(35,35,35)" d="M 640 430 A 1 1 0 0 0 640 360 A 1 1 0 0 0 640 430 M 640 407 L 646 422 Q 640 424 634 422 Z M 640 383 L 634 368 Q 640 366 646 368 Z M 628 395 L 613 401 Q 611 395 613 389 Z M 652 395 L 667 389 Q 669 395 667 401 Z M 631.5 403.5 L 625.2 418.3 Q 619.5 415.5 616.7 409.8 Z M 648.5 386.5 L 654.8 371.7 Q 660.5 374.5 663.3 380.2 Z M 631.5 386.5 L 616.7 380.2 Q 619.5 374.5 625.2 371.7 Z M 648.5 403.5 L 663.3 409.8 Q 660.5 415.5 654.8 418.3 Z">
		<animateTransform attributeName="transform" type="rotate" values="0 640 395; -360 640 395" dur="2.6s" repeatCount="indefinite" />
	</path>

	<g class="wagon">
		<animateTransform attributeName="transform" attributeType="XML" type="translate" values="0 0; 0 2; 0 0" dur=".5s" repeatCount="indefinite" />
		<path class="axleF" fill="rgb(35,35,35)" d="M 512 354 H 552 V 386 A 1 1 0 0 1 512 386 Z" />
		<path class="axleB" fill="rgb(35,35,35)" d="M 632 354 H 672 V 386 A 1 1 0 0 1 632 386 Z" />.........完整代码请登录后点击上方下载按钮下载查看