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" />
<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".........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0