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-2.7,2.9-4.3,4.5-4.3,4.5L526.8,94.8z"/>
	</g>
</g>
<g id="fly">
	<path id="rightwing" class="st0" d="M-35.2,45.4c0,0,3.7-17.1,13.7-18.1c10-1,11.3,7.2,8.3,10.6C-16.4,41.2-36,41.8-35.2,45.4z"/>
	<path id="leftwing" class="st0" d="M-36.4,44.6c0,0-1.6-17.4-11.4-19.6s-12.1,5.8-9.5,9.5C-54.6,38.2-35.2,41.2-36.4,44.6z"/>
	<circle id="flybody" cx="-36" cy="45.7" r="8.5"/>
</g>
  <g id="tree">
    <path class="branch" d="M8.1 487.7c3.7-2.7 9.2-6.7 16.3-11.6 14.3-9.8 35.1-23.5 61.2-38 13-7.2 27.3-14.6 42.8-21.7 15.4-7 32-13.6 49.4-18.9 8.7-2.7 17.6-5 26.7-6.8 4.5-.9 9.1-1.6 13.7-2.3l3.4-.4.9-.1h.9l1.9-.2c2.5-.2 4.9-.4 7.4-.7 19.7-1.6 40.1-2.6 60.5-3.5 40.8-1.7 81.9-2.7 120.4-4.7 38.5-1.9 74.5-4.7 105.2-9.1 15.3-2.2 29.3-4.8 41.5-7.7 12.2-2.9 22.7-6.2 31.2-9.5 8.4-3.3 14.7-6.6 18.9-9 1-.6 1.9-1.2 2.7-1.7.8-.5 1.4-1 1.9-1.3 1-.7 1.6-1.1 1.6-1.1s-.6.3-1.6.9c-.5.3-1.2.7-2 1.1-.8.4-1.8.9-2.8 1.5-4.3 2.1-10.8 4.9-19.3 7.4-8.5 2.6-19.1 5-31.4 6.9-12.3 1.9-26.2 3.4-41.4 4.3-30.5 1.9-66.2 1.9-104.5.8-38.3-1.1-79.2-3.3-120.3-4.8-20.6-.8-41.2-1.4-61.8-1.3-2.6 0-5.1 0-7.7.1l-3.9.1-4 .1c-5.4.2-10.7.6-15.9 1.2-10.5 1.1-20.7 2.8-30.6 4.9-19.8 4.2-38.4 9.8-55.7 15.8-17.7 6.1-33.7 12.7-48.2 19.1-29 12.9-52.3 25.4-68.4 34.5-.6.3-1.1.7-1.7 1v64.9c3.5-3 8.1-6.8 8.6-7.2.9-.6 2.3-1.7 4.1-3z"/>
    <path class="branch" d="M510.3 458.8c-.9-1-1.9-2.2-3-3.6s-2.4-2.8-3.9-4.3c-1.4-1.6-3-3.2-4.7-5-3.4-3.5-7.5-7.3-12.1-11.2-4.6-3.9-9.8-7.9-15.5-11.9-5.7-4-12-7.8-18.6-11.5-6.6-3.7-13.8-7.2-21-10.5-3.6-1.6-7.3-3.2-11-4.8-1.9-.8-3.7-1.5-5.6-2.3l-5.6-2.2c-3.8-1.5-7.6-2.8-11.3-4.3-3.8-1.3-7.6-2.7-11.4-3.9-7.5-2.5-15-4.9-22.3-7-7.3-2.1-14.3-4.1-21-5.8-3.4-.9-6.6-1.7-9.8-2.5-3.2-.8-6.2-1.5-9.2-2.2-5.9-1.4-11.3-2.6-16-3.7-4.8-1.1-9-2-12.4-2.7-6.8-1.5-10.7.1-10.7.1l-4.1 23.3s4 .4 10.9 1.2c3.4.4 7.6.9 12.4 1.4 4.8.6 10.2 1.3 16 2 2.9.4 6 .8 9.1 1.3 3.2.5 6.4 1 9.8 1.4 6.7 1.1 13.7 2.2 21 3.6 7.3 1.3 14.7 2.9 22.3 4.6 3.8.8 7.6 1.8 11.4 2.7 3.8 1 7.6 1.9 11.4 3l5.7 1.6c1.9.6 3.8 1.1 5.6 1.7 3.8 1.1 7.5 2.4 11.2 3.5 7.4 2.4 14.4 5.1 21.2 8 6.8 2.9 13.2 6 19.1 9.2 5.9 3.3 11.4 6.6 16.3 10 4.9 3.4 9.2 6.6 12.9 9.7 1.9 1.5 3.6 3 5.1 4.4 1.6 1.4 3 2.7 4.2 3.9 1.3 1.2 2.4 2.3 3.4 3.2.9 1 1.7 1.8 2.4 2.5 1.3 1.3 2 2.1 2 2.1s-.6-.8-1.8-2.3c-.8-.7-1.6-1.6-2.4-2.7z"/>
    <path class="branch" d="M309.4 451.9c-5.6 1.5-13.8 2.6-23.6 2.9-9.9.4-21.4 0-33.6-1.2-6.1-.6-12.4-1.4-18.7-2.4-6.3-1.1-12.6-2.4-18.7-4.3-6.1-1.8-12-4.1-17.6-6.8-5.6-2.7-10.9-5.7-16-8.9s-10-6.5-14.6-9.8c-4.7-3.2-9.2-6.3-13.4-9.1-8.4-5.6-15.7-10.2-20.8-13.2-5.1-3-8-4.7-8-4.7l-11.7 23.8s3 1.2 8.3 3.4c5.2 2.2 12.6 5.5 21.4 9.8 4.4 2.1 9.2 4.5 14.3 7.1 5.1 2.6 10.6 5.3 16.5 8s12.2 5.2 18.8 7.3c6.6 2.1 13.4 3.7 20.2 4.8 6.8 1.1 13.7 1.7 20.3 2.1 6.7.4 13.2.5 19.5.4 12.6-.2 24.3-1.1 34.3-2.6 9.9-1.4 18.1-3.5 23.6-5.6 2.7-1.1 4.8-2.1 6.2-2.8 1.4-.8 2-1.2 2-1.2s-.7.4-2.2 1c-1.6.5-3.7 1.3-6.5 2z"/>
    <path class="l.........完整代码请登录后点击上方下载按钮下载查看