TweenMax+DrawSVGPlugin+MorphSVGPlugin+svg实现变色龙吃虫动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：TweenMax+DrawSVGPlugin+MorphSVGPlugin+svg实现变色龙吃虫动画效果代码

代码标签： TweenMax DrawSVGPlugin MorphSVGPlugin svg 变色龙虫

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
  
<style>
:root {
  --colour-change: rgb(0, 128, 128);
}

.videoCont {
  display: none;
  width: 70vw;
  height: 70vw;
  max-height: 70vh;
  max-width: 70vh;
  overflow: hidden;
  margin: 2rem;
}

.player {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.canvas {
  position: absolute;
}

body {
  height: 100vh;
  margin: 0;
  background-color: #201f21;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: sans-serif;
}

#jungle {
  flex: 0 0 auto;
  display: block;
  background-image: linear-gradient(rgba(2, 3, 3, 0), #000305), url(https://images.unsplash.com/photo-1516528387618-afa90b13e000?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=9b98afc9486dcb6e25f5daa32f351625);
  background-color: #3e6274;
  background-blend-mode: overlay;
  background-size: cover;
  width: 40vw;
  height: 40vw;
  max-height: 60vh;
  max-width: 60vh;
  border: solid 5px var(--colour-change);
  border-radius: 50%;
  transition: background-color 0.8s ease-out;
}

.green {
  fill: #62bc86;
}

.lightgreen {
  fill: #22b895;
}

.branch {
  fill: #4e4e4d;
}

.tongue {
  fill: #ea88b5;
}

#tongue, #blob {
  opacity: 0;
  visibility: hidden;
}

.change {
  fill: var(--colour-change);
  transition: fill 0.8s ease-out;
}

.changeLight {
  fill: #fff;
  transition: fill 0.8s ease-out;
}

#box {
  position: absolute;
  width: 80px;
  height: 80px;
  background-color: green;
  transition: all 1s ease;
}

#flypath {
  fill: none;
  stroke: none;
}

#fly {
  opacity: 0;
  visibility: hidden;
}

#flybody {
  fill: #424242;
}
</style>


</head>

<body >
  <canvas class="canvas"></canvas>

<div class="videoCont">
  <video crossorigin="anonymous" autoplay class="player"></video>
</div>


<!-- svg biz -->
<svg id="jungle" viewBox="0 0 700 600">
  <style>
 .st0{fill:#fff}.st1{fill:#683c11}.st2{fill:#95c11f}.st3{fill:#729309}.st6{fill:#d63660}.st7{fill:#d1567c}
  </style>
<g id="leaves">
  <g id="bigleaf" class="topleaves">
		<path id="landingleaf" class="lightgreen" d="M589.4,147c0,0-90.2-6.6-71.2,5.1c19.1,11.7,62,0.2,62,0.2s-73.9,51.2-61.1,52.3c22.7,1.9,63-47.8,63-47.8
			s-9.4,72.3,6.4,54.9C595.1,204.7,589.4,147,589.4,147z"/>
		<path class="lightgreen" d="M614.9,120.8c0,0-73.9,11.9-83.1,1c-9.2-10.9,86.8-5.8,86.8-5.8s10.2,85.3,1.2,84.3
			C611,199.4,610.5,142.7,614.9,120.8z"/>
		<path class="lightgreen" d="M671.8,53.8c0,0-83.9,17.6-95,5.6c-11.1-12,99.1-11.3,99.1-11.3s16,97.2,5.7,96.6
			C671.4,144,668,79.1,671.8,53.8z"/>
		<path class="lightgreen" d="M640,94.3c0,0-62.6,4.8-82.3-9.8c-25.2-18.6,86.6,5,86.6,5s11.4,84.5-4.7,83.7S640,94.3,640,94.3z"/>
		<path class="lightgreen" d="M576.8,152.4c0,0,2.6-2,7-5.7c4.4-3.7,10.7-9.2,18-15.9c3.6-3.4,7.5-7.1,11.6-11.1c4-4,8.2-8.3,12.5-12.9
			c4.2-4.5,8.6-9.3,12.8-14.3c4.3-4.9,8.4-10.1,12.5-15.4c2-2.7,4-5.3,5.9-8c1.9-2.7,3.8-5.4,5.6-8.1c1.8-2.7,3.6-5.4,5.2-8.2
			c0.8-1.4,1.7-2.7,2.5-4.1c0.8-1.4,1.5-2.7,2.3-4.1c0.7-1.4,1.5-2.7,2.2-4c0.7-1.4,1.4-2.7,2-4c1.4-2.6,2.5-5.3,3.7-7.9
			c1.2-2.6,2.1-5.2,3.1-7.7c1-2.5,1.7-5,2.5-7.3c0.8-2.3,1.3-4.6,1.9-6.8c0.3-1.1,0.5-2.2,0.8-3.2c0.2-1,0.4-2.1,0.5-3
			c0.3-2,0.7-3.8,0.9-5.5c0.2-1.7,0.3-3.3,0.4-4.7c0.2-1.4,0.2-2.7,0.2-3.8c0-1.1,0-2,0-2.8c0-1.5,0-2.3,0-2.3l6.3-0.2
			c0,0,0,0.9,0,2.5c0,0.8,0,1.8,0,3c0,1.2,0,2.6-0.2,4.1c-0.2,1.5-0.3,3.2-0.5,5.1c-0.2,1.8-0.6,3.8-1,5.9c-0.2,1-0.4,2.1-0.6,3.2
			c-0.3,1.1-0.6,2.2-0.9,3.4c-0.6,2.3-1.2,4.7-2.1,7.2c-0.8,2.4-1.6,5-2.7,7.6c-1,2.6-2,5.3-3.3,7.9c-1.2,2.7-2.4,5.4-3.9,8.1
			c-0.7,1.4-1.4,2.7-2.1,4.1c-0.7,1.4-1.6,2.7-2.3,4.1c-0.8,1.4-1.6,2.8-2.4,4.2c-0.9,1.4-1.7,2.7-2.6,4.1c-1.7,2.8-3.6,5.5-5.4,8.3
			c-1.8,2.8-3.9,5.4-5.8,8.2c-2,2.7-4.1,5.4-6.1,8c-4.2,5.3-8.5,10.5-12.8,15.4c-4.3,5-8.8,9.7-13.1,14.3
			c-4.3,4.5-8.6,8.8-12.8,12.8c-4.1,4-8.1,7.7-11.8,11.1c-7.4,6.7-13.8,12.1-18.3,15.8c-4.5,3.7-7.2,5.7-7.2,5.7L576.8,152.4z"/>
	</g>
	<g id="smallleaf" class="topleaves">
		<path class="green" d="M532.5,90.4c0,0-61.2,3.7-47.4,9.8c13.8,6.2,41.7-5.4,41.7-5.4s-45.3,41.2-36.6,40.8
			c15.4-0.7,38.3-37.9,38.3-37.9s-0.2,49.6,9,36.4C541.3,128.8,532.5,90.4,532.5,90.4z"/>
		<path class="green" d="M549.7,70.1c0,0-48.7,14.6-55.8,8.1c-7.1-6.5,57.9-11.7,57.9-11.7s14.1,56.7,8,56.8
			C553.8,123.4,548.6,85.2,549.7,70.1z"/>
		<path class="green" d="M564.3,50c0,0-41.7,8.8-56.2,0.8c-18.5-10.3,58.6-4.4,58.6-4.4s14.9,56,4,56.9
			C559.8,104.1,564.3,50,564.3,50z"/>
		<path class="green" d="M526.8,94.8c0,0,1.6-1.6,4.2-4.5c2.7-2.9,6.4-7.1,10.7-12.4c2.2-2.6,4.5-5.5,6.8-8.5
			c2.4-3.1,4.8-6.3,7.3-9.8c2.5-3.4,5-7,7.4-10.8c2.4-3.7,4.8-7.6,7.1-11.5c1.1-2,2.2-3.9,3.3-5.9c1-2,2.1-4,3.1-6c1-2,2-4,2.8-6
			c0.4-1,0.9-2,1.3-3c0.4-1,0.8-2,1.2-3c0.4-1,0.8-2,1.2-2.9c0.3-1,0.7-1.9,1-2.9c0.7-1.9,1.2-3.8,1.8-5.7c0.6-1.8,1-3.7,1.4-5.4
			c0.5-1.8,0.7-3.5,1-5.1c0.3-1.6,0.5-3.3,0.7-4.8c0.1-0.8,0.2-1.5,0.3-2.2c0-0.7,0.1-1.4,0.1-2.1c0-1.4,0.2-2.6,0.1-3.8
			c0-1.2-0.1-2.2-0.1-3.2c0-1-0.1-1.8-0.2-2.6c-0.1-0.7-0.2-1.4-0.2-1.9c-0.1-1-0.2-1.6-0.2-1.6l4.2-0.7c0,0,0.1,0.6,0.2,1.7
			c0.1,0.6,0.1,1.2,0.2,2.1c0.1,0.8,0.2,1.7,0.2,2.8c0,1,0.1,2.2,0.1,3.5c0,1.3-0.1,2.6-0.2,4c0,0.7-0.1,1.5-0.1,2.2
			c-0.1,0.8-0.2,1.5-0.3,2.3c-0.2,1.6-0.4,3.3-0.8,5c-0.4,1.7-0.6,3.5-1.2,5.4c-0.5,1.8-0.9,3.7-1.5,5.6c-0.6,1.9-1.2,3.9-1.9,5.8
			c-0.4,1-0.7,2-1.1,3c-0.4,1-0.8,2-1.2,3c-0.4,1-0.8,2-1.3,3c-0.5,1-0.9,2-1.4,3c-0.9,2-1.9,4-2.9,6.1c-1,2-2.1,4-3.2,6
			c-1.1,2-2.3,4-3.4,6c-2.4,3.9-4.8,7.8-7.3,11.5c-2.5,3.8-5.1,7.4-7.6,10.8c-2.5,3.4-5.1,6.7-7.5,9.8c-2.4,3.1-4.8,5.9-7,8.5
			c-4.4,5.2-8.2,9.4-10.9,12.3c-.........完整代码请登录后点击上方下载按钮下载查看