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

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

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