TweenMax结合svg实现卡车在起伏路面行驶冒出爱心泡泡动画效果代码
代码语言：html
所属分类：动画
代码描述：TweenMax结合svg实现卡车在起伏路面行驶冒出爱心泡泡动画效果代码，结合了MorphSVGPlugin、ScrubGSAPTimeline、DrawSVGPlugin、Physics2DPlugin等插件
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
background-color:#3D933A;
overflow: hidden;
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.container{
position:absolute;
width:100%;
}
svg{
width:100%;
height:100%;
visibility:hidden;
overflow:hidden;
}
</style>
</head>
<body>
<div class="container">
<svg class="mainSVG" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 600 600">
<defs>
<filter id="goo">
<feGaussianBlur in="SourceGraphic" stdDeviation="1" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 12 -1.9" result="cm" />
</filter>
<g id="bubble" stroke="#F3F1E2">
<ellipse fill="none" stroke-width="1" stroke-miterlimit="10" cx="8" cy="8" rx="7" ry="7"/>
<path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M3.39,8
c0.07-0.84,0.35-1.68,0.87-2.42c0.5-0.71,1.15-1.25,1.89-1.61"/>
</g>
<path id="heart" fill="none" stroke="#F3F1E2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M11.58,3.55c0,4.16-4.32,8.04-5.54,8.04S0.5,7.7,0.5,3.55c0-1.68,1.36-3.05,3.05-3.05c1.03,0,1.94,0.51,2.49,1.3
c0.55-0.78,1.46-1.3,2.49-1.3C10.22,0.5,11.58,1.86,11.58,3.55z M3.99,2.25c-0.86,0-1.72,0.78-1.78,1.86"/>
<g id="pop" class="pop" fill="none" stroke="#F3F1E2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" opacity="0">
<circle cx="18.22" cy="17.89" r="0" stroke="#F3F1E2" fill="none"/>
<line x1="18" y1="10.5" x2="18" y2="0.5"/>
<line x1="18" y1="25.5" x2="18" y2="35.5"/>
<line x1="25.5" y1="18" x2="35.5" y2="18"/>
<line x1="10.5" y1="18" x2="0.5" y2="18"/>
</g>
</defs>
<g id="follower" ></g>
<path id="waveyPath" fill="none" stroke="none" stroke-width="3.5" stroke-linecap="round" stroke-miterlimit="10" d="M300,338
c100,0,100,36,199.99,36c100,0,100-36,200-36c100,0,100,36,200,36c100,0,100-36,200-36c100,0,100,36,200.01,36s100-36,200.01-36" />
<g id="movingPath">
<path id="filledMovingPath" fill="#69B565" d="M2300.5,338c-100,0-100,36-200.01,36
c-100,0-100-36-200.01-36c-100,0-100,36-200,36c-100,0-100-36-200-36c-100,0-100,36-200,36c-100,0-100-36-199.99-36
c-100,0-100,36-200.01,36s-100-36-200.01-36c-100,0-100,36-200,36c-100,0-100-36-200-36c-100,0-100,36-200,36
c-100,0-100-36-199.99-36v423h2400V338z"/>
<path class="movingPath" fill="none" stroke="#F3F1E2" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M-100,338
c100,0,100,36,199.99,36c100,0,100-36,200-36c100,0,100,36,200,36c100,0,100-36,200-36c100,0,100,36,200.01,36s100-36,200.01-36
c100,0,100,36,199.99,36c100,0,100-36,200-36c100,0,100,36,200,36c100,0,100-36,200-36c100,0,100,36,200.01,36
c100,0,100-36,200.01-36" />
</g>
<g id="jumpingLorry">
<g id="movingLorry">
<g id="lorryGroup" fill="none" stroke="#F3F1E2" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10">
<path d="M53.58,34.5 H48v-24h12.24c2.2,0,4.34,1.76,4.76,3.92l1.56,7.9l1.96,0.78c1.93,0.77,3.49,3.07,3.49,5.15v4.25c0,1.1-0.89,2-2.01,2h-3.26h-0.3
C65.94,31.38,63.25,29,60,29S54.06,31.38,53.58,34.5z" />
<line x1="1.5" y1="34.5" x2="10.5" y2="34.5" />
<path fill="#3D933A" stroke="#F3F1E2" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M34.41,34.5
H48v-29c0-2.2-1.79-4-4.01-4H9.01C6.79,1.5,5,3.29,5,5.5v29h6.65c0.81-5.81,5.59-10.28,11.38-10.28S33.6,28.69,34.41,34.5z" />
<path d="M53.25,15.53h3.66
c1.58,0,3.02,1.19,3.22,2.65l0.1,0.7c0.2,1.46-0.92,2.65-2.5,2.65h-4.48V15.53z" />
<path d="M34.53,36.24
c0-6.64-5.15-12.02-11.5-12.02c-6.35,0-11.5,5.38-11.5,12.02" />
<g id="wheelL">
<circle cx="23.03" cy="35.72" r="6.5" />
<circle fill="#F3F1E2" stroke="none" cx="23" cy="35.5" r="1" />
</g>
<g id="wheelR">
<circle cx="60" cy="35.5" r="6.5" />
<circle fill="#F3F1E2" stroke="none" cx="60" cy="35.5" r="1" />
</g>
</g>
</g>
</g>
</svg>
</div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script>
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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