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

代码语言:html

所属分类:动画

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

代码标签: 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" />
		<path class="chairBase" fill="rgb(35,35,35)" d="M 591 328 L 582 304 H 526 L 520 340 H 588 Z" />
		<path class="chairSeat" fill="rgb(107,107,107)" d="M 590 311 L 521 304 V 293 H 590 Z" />
		<path class="chairBackMetal" fill="rgb(35,35,35)" d="M 586 293 C 586 286 586 284 583 284 C 575 284 572 285 572 275 H 570 C 570 282 571 283 572 284 H 566 V 286 H 582 C 584 286 584 287 584 293 Z" />
		<path class="chairBack" fill="rgb(107,107,107)" d="M 566 272 A 1 1 0 0 0 574 272 V 259 A 1 1 0 0 0 566 259 Z" />
		<path class="wagonBody" fill="rgb(107,107,107)" d="M 476 350 H 715 V 311 H 605 C 596 311 596 316 596 320 C 596 326 588 326 588 326 C 582 326 579 330 579 339 H 476 Z" />
		<rect class="wagonBase" fill="rgb(35,35,35)" x="494" y="350" height="5" width="208" />
	</g>

	<g class="guy">
		<animateTransform attributeName="transform" attributeType="XML" type="translate" values="0 0; 0 2; 0 0" dur=".5s" repeatCount="indefinite" />
		<path class="bootR" d="M 468 340 L 508 340 L 510 310 L 490 312 V 328 L 475 327 Z" fill="rgb(51,51,51)" />
		<path class="bootL" d="M 471 340 L 511 340 L 513 310 L 493 312 V 328 L 478 327 Z" fill="rgb(43,43,43)" />

		<path class="footHolder" d="M 476 340 Q 467 340 462 330 L 458 333 Q 465 345 476 345 Z" fill="rgba(35,35,35)" />
		<path class="wagonConnector" d="M 486 348 L 480 366 L 474 364 L 480 346 Z" fill="rgb(35,35,35)" />

		<path class="wagonPole" d="M 480 347 L 115 310 L 114 322 L 476 358 Z" fill="rgb(35,35,35)">
			<animate attributeName="d" values="
																				 M 480 347 L 115 310 L 114 322 L 476 358 Z; 
																				 M 480 347 L 115 315 L 114 327 L 476 358 Z; 
																				 M 480 347 L 115 310 L 114 322 L 476 358 Z" dur="0.7s" begin="-0.35s" repeatCount="indefinite" />
		</path>

		<path class="wagonPole" d="M 160 325 L 198 296" stroke="rgb(51,51,51)" stroke-width="4">
			<animate attributeName="d" values="
																				 M 160 325 L 198 300;
																				 M 160 322 L 198 290;
																				 M 160 325 L 198 300;
																				 " dur="0.7s" repeatCount="indefinite" />
		</path>
		<path class="waistcoatLower" d="M 512 320 L 512 280 L 567 279 L 567 293 H 521 V 316 Z" fill="rgb(35,35,35)" />
		<path class="pantR" d="M 491 313 V 279 C 491 273 491 269 500 269 L 537 270 L 537 279 L 515 281 C 510 282 510 287 510 292 L 510 311 Z" fill="rgb(59,59,59)" />
		<path class="pantL" d="M 494 312 V 282 C 494 276 494 272 503 272 L 537 273 L 537 280 L 518 283 C 513 285 513 290 513 294 L 513 311 Z" fill="rgba(67,67,67)" />

	</g>
	<path class="ropeHandHorseTop" d="M 444 255 Q 310 280 148 290" stroke="rgb(35,35,35)" stroke-width="3" fill="none">
		<animate attributeName="d" values="
																				 M 444 255 Q 310 280 148 290; 
																				 M 444 255 Q 310 280 149 300; 
																				 M 444 255 Q 310 280 148 290" dur="0.7s" begin="-0.35s" repeatCount="indefinite" />
	</path>

	<path class="horseLegFrontRight" d="M 208 320 L 216 339 L 201 360 Q 198 364 199 369 L 208 406 L 216 424 L 229 415 L 224 406 L 218 369 L 245 338" fill="rgb(47,47,47)">
		<animate attributeName="d" values="
																				 M 208 320 L 216 339 L 201 360 Q 198 364 199 369 L 208 406 L 216 424 L 229 415 L 224 406 L 218 369 L 245 338;
																				 M 208 320 L 216 339 L 218 366 Q 216 370 215 377 L 206 410 L 197 430 L 216 430 L 220 416 L 233 375 L 245 338;
																				 M 208 320 L 216 339 L 236 375 Q 236 382 238 390 L 242 418 L 236 430 L 253 430 L 257 416 L 253 380 L 245 338;
																				 M 208 320 L 216 339 L 209 368 Q 207 374 214 381 L 233 410 L 242 425 L 254 413 L 246 405 L 227 372 L 245 338;
																				 M 208 320 L 213 339 L 206 368 Q 204 374 211 381 L 230 410 L 239 425 L 251 413 L 243 405 L 224 372 L 242 338;
																				 M 208 320 L 216 339 L 201 360 Q 198 364 199 369 L 208 406 L 216 424 L 229 415 L 224 406 L 218 369 L 245 338" dur="1.4s" begin="-0.7s" repeatCount="indefinite" />
	</path>

	<path class="horseLegFrontLeft" d="M 202 320 L 210 339 L 195 360 Q 192 364 193 369 L 202 406 L 210 424 L 223 415 L 218 406 L 212 369 L 239 338" fill="rgb(67,67,67)">
		<animate attributeName="d" values="
																				 M 202 320 L 210 339 L 195 360 Q 192 364 193 369 L 202 406 L 210 424 L 223 415 L 218 406 L 212 369 L 239 338;
																				 M 202 320 L 210 339 L 212 366 Q 210 370 209 377 L 200 410 L 191 430 L 210 430 L 214 416 L 227 375 L 239 338;
																				 M 202 320 L 210 339 L 230 375 Q 230 382 232 390 L 236 418 L 230 430 L 247 430 L 251 416 L 247 380 L 239 338;
																				 M 202 320 L 210 339 L 203 368 Q 201 374 208 381 L 227 410 L 236 425 L 248 413 L 240 405 L 221 372 L 239 338;
																				 M 202 320 L 207 339 L 200 368 Q 198 374 205 381 L 224 410 L 233 425 L 245 413 L 237 405 L 218 372 L 236 338;
																				 M 202 320 L 210 339 L 195 360 Q 192 364 193 369 L 202 406 L 210 424 L 223 415 L 218 406 L 212 369 L 239 338" dur="1.4s" repeatCount="indefinite" />
	</path>

	<path class="horseLegBackRight" d="M 320 338 Q 324 362 351 378 L 342 417 L 336 430 L 353 430 L 357 418 L 368 380 L 366 330" fill="rgb(47,47,47)">
		<animate attributeName="d" values="
																				 M 320 338 Q 324 362 351 378 L 342 417 L 336 430 L 353 430 L 357 418 L 368 380 L 366 330;
																				 M 320 338 Q 324 362 351 378 L 362 417 L 356 430 L 373 430 L 377 418 L 368 380 L 366 330;
																				 M 318 338 Q 320 362 355 378 L 345 405 L 349 423 L 362 414 L 359 405 L 373 376 L 366 330;
																				 M 318 338 Q 323 362 348 378 L 336 417 L 330 430 L 348 430 L 352 418 L 365 380 L 366 330;
																				 M 314 338 Q 320 362 342 378 L 325 417 L 318 430 L 335 430 L 342 418 L 360 380 L 366 330;
																				 M 320 338 Q 324 362 351 378 L 342 417 L 336 430 L 353 430 L 357 418 L 368 380 L 366 330" dur="1.4s" repeatCount="indefinite" />
	</path>

	<path class="horseLegBackLeft" d="M 326 338 Q 330 362 357 378 L 348 417 L 342 430 L 359 430 L 363 418 L 374 380 L 366 330" fill="rgb(67,67,67)">
		<animate attributeName="d" values="
																				 M 326 338 Q 330 362 357 378 L 348 417 L 342 430 L 359 430 L 363 418 L 374 380 L 366 330;
																				 M 326 338 Q 330 362 357 378 L 368 417 L 362 430 L 379 430 L 383 418 L 374 380 L 366 330;
																				 M 324 338 Q 326 362 361 378 L 351 405 L 355 423 L 368 414 L 365 405 L 379 376 L 366 330;
																				 M 324 338 Q 329 362 354 378 L 342 417 L 336 430 L 354 430 L 358 418 L 371 380 L 366 330;
																				 M 320 338 Q 326 362 348 378 L 331 417 L 324 430 L 341 430 L 348 418 L 366 380 L 366 330;
																				 M 326 338 Q 330 362 357 378 L 348 417 L 342 430 L 359 430 L 363 418 L 374 380 L 366 330" dur="1.4s" begin="-0.7s" repeatCount="indefinite" />
	</path>
	<path class="horseBody" d="M 371 312 Q 375 270 293 269 Q 193 271 198 308 Q 203 347 283 349 Q 323 342 344 343 Q 370 346 371 312" fill="rgb(67,67,67)">
		<animate attributeName="d" values="
																				 M 371 312 Q 375 270 293 269 Q 193 271 198 308 Q 203 347 283 349 Q 323 342 344 343 Q 370 346 371 312; 
																				 M 371 307 Q 375 265 293 269 Q 193 266 198 303 Q 203 342 283 343 Q 323 337 344 338 Q 370 341 371 307; 
																				 M 371 312 Q 375 270 293 269 Q 193 271 198 308 Q 203 347 283 349 Q 323 342 344 343 Q 370 346 371 312" dur="0.7s" begin="-0.35" repeatCount="indefinite" calcMode="spline" keyTimes="0; 0.5; 1" keySplines="0 0.33 0.66 1; 0.1 0.7 0.9 0.1" />
	</path>

	<path class="horseHead" d="M 300 269 Q 239 261 166 233 Q 152 229 149 240 Q 144 250 141 266 L 134 298 L 153 311 L 181 279 L 202 320 Z" fill="rgb(67,67,67)">
		<animate attributeName="d" values="
																				 M 300 269 Q 239 261 166 233 Q 152 229 149 240 Q 144 250 141 266 L 131 303 L 153 311 L 181 279 L 202 320 L 205 325 Z; 
																				 M 300 269 Q 239 261 160 238 Q 146 234 143 252 Q 141 260 140 270 L 134 310 L 159 317 L 175 288 L 202 320 L 205 325 Z; 
																				 M 300 269 Q 239 261 166 233 Q 152 229 149 240 Q 144 250 141 266 L 131 303 L 153 311 L 181 279 L 202 320 L 205 325 Z" dur="0.7s" begin="-0.35s" repeatCount="indefinite" />
	</path>
<g class="ears">
	<animateTransform attributeName="transform" type="translate" values="0 0; -2 4; 0 0" dur="0.7s" begin="-0.35" repeatCount="indefinite" />
	<path class="horseEarR" d="M 155 242 Q 171 222 148 215 Z&quo.........完整代码请登录后点击上方下载按钮下载查看

网友评论0