TweenMax结合svg实现卡车在起伏路面行驶冒出爱心泡泡动画效果代码-html代码-BFW代码库

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-.........完整代码请登录后点击上方下载按钮下载查看