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" 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.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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