svg+js实现打车出租车滴滴动画效果代码
代码语言：html
所属分类：动画
代码描述：svg+js实现打车出租车滴滴动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
</head>
<body>
<!-- partial:index.partial.html -->
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 525 412" style="enable-background:new 0 0 525 412;" xml:space="preserve">
<style type="text/css">
.st0{opacity:0.102;}
.st1{fill:#35303F;}
.st2{fill:#DE3333;}
.st3{opacity:0.2196;}
.st4{fill:#383838;}
.st5{fill:#A8A6AA;}
.st6{fill:#FFFFFF;}
.st7{fill:#FBA380;}
.st8{fill:#222C44;}
.st9{fill-rule:evenodd;clip-rule:evenodd;fill:#DE3333;}
.st10{fill:#E1825D;}
.st11{fill:#AC1A1A;}
.st12{fill:#C4CCCD;}
.st13{fill:#FCFCFC;}
.st14{fill:#F0EFEF;}
.st15{fill:#141218;}
.st16{opacity:0.502;}
.st17{opacity:0.2;}
.st18{fill:#504B5A;}
.st19{fill:#F3C22E;}
.st20{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
.st21{fill:#E6B521;}
.st22{fill:#DC2F2F;}
.st23{fill:#EDEDED;}
.st24{fill-rule:evenodd;clip-rule:evenodd;fill:#EDEDED;}
</style>
<g id="Background_xA0_Image_1_">
</g>
<g id="Group_41_copy_1_">
<g id="Shape_508" class="st0">
<g>
<path class="st1" d="M507.2,222.2v143.5h-4.1V196h0L474,145.6V121h-2v24.6L442.9,196h0v169.7H439V213.6l-53.1-6.3l-6.3,1.9v-20
l-53.1-8.2l-21.4,8.2v176.6h-2.5v-129h-8.7v-11.2h-3.3v-7.3l-11.3-12.3l-11.3,12.3v7.3h-3.3v11.2h-8.7v129h-2.9V241.5h-25.4v-12
h-44.6v136.2h-3V195.5h-13.5v33.3h-5.4v-14.6h-8.7v-14.1h-6.6v-20.5h-32.5v11.7l-18.1-7.7v24.8H68.3v157.2h-3.5V242l-9.2-4.1
L32.7,242v11.6L15,255.6v110.1h-2.6V234H1v91.7c0,14.6,2.2,28.2,8.6,40.3l507,0.1c5.5-11.9,8.4-25.5,8.4-40.4V219.8L507.2,222.2z
"/>
</g>
</g>
<g id="Shape_509">
<g>
<path class="st2" d="M187.5,219c-9.1,0-16.5,7.2-16.5,16.2c0,3,0.9,5.9,2.5,8.5l13.1,20.7c0.5,0.9,1.8,0.8,2.3,0l12.8-20.9
c1.5-2.5,2.3-5.4,2.3-8.3C204,226.3,196.6,219,187.5,219z M187.5,243.3c-4.6,0-8.3-3.7-8.3-8.1c0-4.5,3.7-8.1,8.3-8.1
s8.3,3.6,8.3,8.1C195.8,239.5,192.1,243.3,187.5,243.3z"/>
</g>
</g>
<g id="Rectangle_2624" class="st3">
<g>
<path class="st4" d="M9.7,366c7.6,15.3,19.8,27.9,34.8,36h437.1c15-8.1,27.2-20.7,34.8-36H9.7z"/>
</g>
</g>
<g id="Shape_535">
</g>
<g id="Rectangle_506_copy">
<g>
<path class="st5" d="M48.4,404c10.8,5.1,22.9,8,35.6,8h358c12.7,0,24.8-2.9,35.6-8H48.4z"/>
</g>
</g>
<g id="Rectangle_506">
<g>
<path class="st6" d="M44.5,402c5.4,3,11.3,5.3,17.4,7h402.3c6.1-1.7,11.9-4,17.4-7H44.5z"/>
</g>
</g>
<g id="rider_1_">
<g id="Shape_10">
<g>
<path class="st2" d="M409.4,246.5c0,0-5.9,13.7-6.7,16.1c-0.8,2.4-1.3,8.4-0.6,11.7c0.7,3.3,2.3,9.2,2.3,9.2s0.7-2.2,1.5-2.5
c0.9-0.3,1.1,0,1.1,0s-0.4-13.5,0-14.9c0.4-1.4,1.3-2.5,1.3-2.5S410.4,246.5,409.4,246.5z"/>
</g>
</g>
<g id="Shape_11">
<g>
<path class="st7" d="M406.3,280.5c-0.6,0-1.9,1.9-1.9,2.7c0,0.8,0.2,2.3,1.3,3.3c1.1,0.9,1.7,1,1.7,1v-6.1
C407.5,281.3,407,280.5,406.3,280.5z"/>
</g>
</g>
<g id="Shape_12">
<g>
<path class="st8" d="M433,282l-25.7-0.3c0,0-0.1,3.5-0.2,5.4c0,1.9,1.1,16.5,1.7,23c0.6,6.5,2.5,25.2,3.8,36
c1.4,10.8,1,16.5,1.1,16.7c0.1,0.2,1.8,0,2.2,0c0.4,0,3,0.3,3,0.3s0.4-8.5,1-16c0.6-7.5-1.3-16.6-1.4-20.2
c-0.1-3.4,2.3-20.1,2.4-21.7c0-0.1,0-0.1,0-0.1c0,0,0,0.1,0,0.1c0,1.6,0.4,17.2,1,22.9c0.6,6,3,34,3,34l5.2,0.7
c0,0,0.1-6.2,1.4-16.9c0.9-7.1,0.6-15,0.3-21.1C431.7,318.7,433,282,433,282z"/>
</g>
</g>
<g id="Shape_13">
<g>
<path d="M429.8,365.3c-0.4-1.3-0.9-3.1-0.9-3.1l-2.3-0.6c0,0,0.2,0.4-0.6,1.7c-0.7,1.2-1.7,2.4-3.4,2.8c-3.4,1-3.8,1.9-3.1,2
c0.6,0.1,7.6-0.2,9.4-0.6C430.8,367.3,430.2,366.7,429.8,365.3z"/>
</g>
</g>
<g id="Shape_13_copy">
<g>
<path d="M417.7,365.3c-0.4-1.3-0.9-3.1-0.9-3.1l-2.3-0.6c0,0,0.2,0.4-0.6,1.7c-0.7,1.2-1.7,2.4-3.4,2.8c-3.4,1-3.8,1.9-3.1,2
c0.6,0.1,7.6-0.2,9.4-0.6C418.7,367.3,418.1,366.7,417.7,365.3z"/>
</g>
</g>
<g id="Shape_6">
<g>
<path class="st9" d="M438.7,257.4c-1.6-5.5-4.7-12.7-6.3-14.5c-1.6-1.8-6.7-1.7-6.7-1.7s-8.9,0.1-11.5,0.4
c-2.6,0.3-4.5,2.9-5.4,6.5c-0.9,3.6-0.3,14.9-0.6,22.2c-0.2,7.2-1.3,11.7-1.3,11.7L433,283l-1-13c0,0-1.4-1.8,2.7-0.6
c4.1,1.2,5.7-0.4,5.9-1.9C440.8,266,440.3,262.9,438.7,257.4z M430.6,262.6c0,0,0-4.1,1-6.1l2.5,6.7L430.6,262.6z"/>
</g>
</g>
<g id="Shape_3">
<g>
<path class="st10" d="M419,236c0,0-0.9,3.1-1,5.1c-0.1,2,1.8,2.4,3.8,2.3c2-0.1,3.6-2.1,3.6-2.1l0.5-9.3L419,236z"/>
</g>
</g>
<g id="Shape_7">
<g>
<path class="st11" d="M431.8,269.1l-11.5-6.4c0,0-0.6,0.1-1.1,0c-0.5-0.1-2.2-0.4-2.7-0.4c-0.5,0-0.8,0.4-0.8,0.4v1.1
c0,0,1.8,1.6,5.2,2.7c3.4,1.1,10.9,5.6,11.2,5.9C432.4,272.8,431.8,269.1,431.8,269.1z"/>
</g>
</g>
<g id="Shape_9_copy">
<g>
<path class="st6" d="M417.3,250.4c-0.3-0.7-0.8-0.6-2-0.3c-1.6,0.3-2.8,0.6-3.7,0.8c-0.9,0.2-0.7,1.1,0,2.3s3.2,6.8,3.2,6.8
l6.3,0C421,260,417.7,251.1,417.3,250.4z"/>
</g>
</g>
<g id="Shape_9">
<g>
<path class="st12" d="M417.1,250.9c-0.3-0.7-0.7-0.7-1.6-0.5s-3.1,0.7-3.9,0.9c-0.8,0.2-0.6,0.9,0,2c0.6,1.2,3,6.6,3,6.6l5.4-1
C420,259,417.4,251.6,417.1,250.9z"/>
</g>
</g>
<g id="Shape_8">
<g>
<path class="st7" d="M419.2,258c-1.2-0.7-2.5-1-4-1c-1.6,0-1.9,0.6-1.7,1.3c0.1,0.8,0.8,2.5,2.5,3.4c1.7,0.9,4,1,4,1
s0-0.5,0.2-1.7c0.2-1.2,1-1.3,1-1.3C421.1,259.1,420.1,258.5,419.2,258z"/>
</g>
</g>
<g id="Shape_5">
<g>
<polygon class="st11" points="429.2,250.3 430.7,260.4 431.5,256.5 "/>
</g>
</g>
<g id="Shape_1">
<g>
<path class="st7" d="M428.3,226c-0.2-0.7-5.2-5-7.7-5c-2.5,0-9.4,1.9-10.1,3.4c-0.8,1.5-0.4,3.6-0.4,3.6
c-1.7,0.3-0.8,3.7,0.4,5.2c1.2,1.4,2,6.6,7.7,6.1c6.8-0.6,8.2-7.5,8.2-7.5C429,230.9,428.5,226.7,428.3,226z"/>
</g>
</g>
<g id="Shape_2">
<g>
<path class="st8" d="M427.9,218.9c-1.1-0.9-1.9-0.6-1.9-0.6s0-2.9-7.3-2.5c-7.3,0.4-8.7,3.9-8.8,5.2c-0.1,1.2,0.2,2.3,0.2,2.3
s-0.1,1.8-0.2,2.7c-0.1,0.9,0,1,0,1l0.6-3.6c0,0,0.4,0.4,2.7,0.4c2.2,0,7.5-1.2,9.6-2.7c0,0-0.7,3.9,1.9,6.3
c0,0,0.9-3.4,3.6-2.5C428.3,224.8,429,219.7,427.9,218.9z"/>
</g>
</g>
</g>
<g id="Rectangle_510">
<g>
<path class="st13" d="M11.8,370c0.4,0.7,0.8,1.3,1.2,2h500c0.4-0.7,0.8-1.3,1.2-2H11.8z"/>
</g>
</g>
<g id="Shape_2620">
</g>
<g id="Car_copy_1_">
<g id="Shape_2608_copy_2">
<g>
<ellipse transform="matrix(0.2298 -0.9732 0.9732 0.2298 -97.2543 595.7728)" class="st14" cx="327.8" cy="359.3" rx="21.8" ry="21.8"/>
</g>
</g>
<g id="Shape_2607_copy_2">
<g>
<path class="st15" d="M327.2,332.7c-14.4,0-26.1,11.7-26.1,.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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