svg+css实现按钮鼠标悬浮植物树叶生长动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：悬停
代码描述：svg+css实现按钮鼠标悬浮植物树叶生长动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />

     <style>
     button {
  position: relative;
  padding: 13px 35px;
  background: #f5ddb7;
  font-size: 17px;
  font-weight: 900;
  color: #181818;
  border: none;
  border-radius: 8px;
  box-shadow: 2px 2px 5px #18181869, inset 2px 2px 10px #ffffffb0;
  transition: all .3s ease-in-out;
}

.icon-1 {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 0px;
  height: auto;
  transition: all .5s ease-in-out;
  z-index: -1;
}

.icon-2 {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 0px;
  height: auto;
  transition: all .5s ease-in-out;
  z-index: -2;
}

.icon-3 {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 0px;
  height: auto;
  transition: all .5s ease-in-out;
  z-index: -2;
}

.icon-4 {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 0px;
  height: auto;
  transition: all .5s ease-in-out;
  z-index: -2;
}

.icon-5 {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 0px;
  height: auto;
  transition: all .5s ease-in-out;
  z-index: -2;
}

button:hover {
  padding: 13px 25px;
  border-radius: 8px 8px 24px 24px;
}

button:hover .icon-1 {
  top: -250%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 50px;
  height: auto;
  animation: inIcon1 1s ease .45s forwards;
}

@keyframes inIcon1 {
  0% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(0deg);
  }

  25% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(5deg);
  }

  50% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(1deg);
  }

  65% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(3deg);
  }

  100% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(0deg);
  }
}

button:hover .icon-2 {
  position: absolute;
  top: -200%;
  left: 90%;
  transform: translate(-50%, 0);
  width: 75px;
  height: auto;
  animation: inIcon2 1s ease .45s forwards;
}

@keyframes inIcon2 {
  0% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(0deg);
  }

  35% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(10deg);
  }

  50% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(4deg);
  }

  80% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(5deg);
  }

  100% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(0deg);
  }
}

button:hover .icon-3 {
  position: absolute;
  top: -130%;
  left: 20%;
  transform: translate(-50%, 0);
  width: 60px;
  height: auto;
  animation: inIcon3 1s ease .45s forwards;
}

@keyframes inIcon3 {
  0% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(0deg);
  }

  35% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(-2deg);
  }

  100% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(0deg);
  }
}

button:hover .icon-4 {
  position: absolute;
  top: -300%;
  left: 10%;
  transform: translate(-50%, 0);
  width: 85px;
  height: auto;
  animation: inIcon4 1s ease .45s forwards;
}

@keyframes inIcon4 {
  0% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(0deg);
  }

  40% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(-3deg);
  }

  100% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(0deg);
  }
}

button:hover .icon-5 {
  position: absolute;
  top: -350%;
  left: 90%;
  transform: translate(-50%, 0);
  width: 85px;
  height: auto;
  animation: inIcon5 1s ease .45s forwards;
}

@keyframes inIcon5 {
  0% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(0deg);
  }

  35% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(-3deg);
  }

  100% {
    transform-origin: 0 100%;
    transform: translate(-50%, 0) rotate(0deg);
  }
}

.fil-leaf-1 {
  fill: #7B9B3A
}

.fil-leaf-2 {
  fill: #556729;
  fill-rule: nonzero
}

.fil-leaf-3 {
  fill: #556729
}

.fil-leaf-4 {
  fill: #3C4819
}

.fil-leaf-5 {
  fill: #3C4819
}
      </style>
</head>
<body>
    <button style="margin:200px;">Plant based
  <div class="icon-1">
    <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" viewBox="0 0 208.52 511.88" xmlns:xlink="http://www.w3.org/1999/xlink"><defs></defs><g id="Layer_x0020_1"><metadata id="CorelCorpID_0Corel-Layer"></metadata><path class="fil-leaf-1" d="M121.86 141.25c16.73,2.91 65.77,9.16 77.74,-14.94 14.49,-29.19 12.6,-56.91 -15.12,-69.09 -11.3,-4.96 -22.28,-7.7 -32.28,-9.66 -24.58,24.72 -41.22,75.51 -43.83,83.82 4.31,3.56 8.81,6.86 13.49,9.87zm-17.26 41.05c2.87,7.92 8.26,29.59 7.63,79.7 -0.16,12.74 -0.48,25.41 -0.81,38.43 -1.4,55.59 -2.96,117.52 7.12,210.69l-7.09 0.75c-10.12,-93.56 -8.56,-155.77 -7.15,-211.61 0.33,-13.06 0.65,-25.77 0.81,-38.35 0.53,-42.42 -3.06,-63.29 -5.69,-72.77 -7.55,8.48 -18.48,15.07 -34.33,16.54 -26.77,2.47 -43.19,-16.99 -52.84,-36.58 16.49,-8.49 65.65,-32.22 98.27,-31.47 1.86,1.42 3.76,2.8 5.69,4.13 -0.15,5.56 -1.43,24.61 -11.62,40.53zm-41.18 -148.65c-0.32,0.84 1.68,9.87 -6.19,10.71 -7.87,0.84 -3.26,-5.14 -6.82,-7.98 -3.57,-2.84 -9.97,-14.59 1.99,-15.96 11.97,-1.37 11.02,13.23 11.02,13.23zm124.63 55.54c0,0 -3.89,14.8 -10.18,18.69 -6.3,3.88 -22.78,7.24 -28.87,0.11 -6.09,-7.14 -1.57,-31.71 17.64,-30.45 19.21,1.26 22.68,8.4 21.42,11.65zm-101.53 67.51c0,0 5.88,5.56 5.46,9.87 -0.42,4.3 -5.78,19.21 -14.07,20.05 -8.29,0.84 -24.15,-6.82 -21.84,-17.53 2.31,-10.71 10.5,-11.34 12.6,-10.6 2.1,0.74 3.36,2.1 17.85,-1.78zm61.49 -109.94c-12.74,-2.33 -23.63,-3.69 -31.15,-7.4 0,0 -2.41,15.22 -4.51,19.74 -2.1,4.51 -6.3,17.32 -14.8,21.1 -8.5,3.78 -9.87,-28.14 4.62,-45.15 0,0 -10.13,-4.4 -22.34,-9.92 -11.47,31.21 -7.3,64.58 -7.28,64.68l-0.48 0.06c9.73,14.77 20.76,28.04 33.37,39.01 3.68,-11.43 19.48,-57.46 42.58,-82.12zm-71.44 -23.1c-16.59,-7.55 -35.59,-16.58 -38.25,-19.47 -1.97,-2.14 -4.87,-3.72 -7.63,-4.2 9.11,27.4 20.23,54.59 34.36,78.62 1.13,1.92 2.28,3.82 3.45,5.7 -0.66,-11.21 -0.85,-36.56 8.07,-60.65zm-49.59 -23.57c-2.34,0.66 -4.05,2.62 -4.09,6.41 -0.1,9.45 -9.03,35.38 -9.03,35.38 0,0 33.07,14.91 22.99,23.1 -10.08,8.19 -25.41,-8.5 -26.35,-9.34 0,0 -5.94,16.24 -8.44,35.85 11.53,-1.14 38.81,-2.11 72.53,8.35 -4.45,-6.19 -8.65,-12.68 -12.61,-19.42 -14.44,-24.56 -25.77,-52.36 -35.01,-80.32zm-25.33 95.01c-0.61,6.01 -0.86,12.26 -0.49,18.39 0,0 56.17,-9.87 57.33,8.71 1.15,18.58 -58.48,9.45 -58.48,9.45 0,0 2.71,16.68 10.73,34.23 16.07,-8.25 62.14,-30.45 95.29,-31.76l-1.75 -1.5 0.01 -0.03c-9.54,-8.13 -18.2,-17.54 -26.08,-27.89l-0.01 0.04c-36.16,-12.16 -65.36,-10.82 -76.53,-9.63z"></path></g></svg>
  </div>
  <div class="icon-2">
    <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" viewBox="0 0 420.62 554.38" xmlns:xlink="http://www.w3.org/1999/xlink"><defs></defs><g id="Layer_x0020_1"><metadata id="CorelCorpID_0Corel-Layer"></metadata><path class="fil-leaf-2" d="M1.57 554.38c-0.01,-0.44 -2.46,-153.75 -1.23,-217.01 0.74,-38.16 6.99,-96.57 32.48,-148.36 17.72,-36 44.66,-68.8 85.37,-89.54l32.28 -4.39c21.9,-6.8 39.46,-7.7 45.04,-7.81 4.32,4.98 10.37,12.18 17.72,21.54 -0.39,10.62 -6.13,113.86 -82.32,208.5 -31.36,-18.46 -51.28,-57.42 -51.28,-57.42 52.13,-30.97 58.88,-51.52 69.61,-68.07 10.73,-16.56 2.45,-44.16 -11.65,-26.06 -14.11,18.09 -65.01,68.07 -65.01,68.07 -12.27,-87.7 33.12,-110.39 33.12,-110.39l0.34 -0.64c-27.64,18.92 -47.12,44.59 -60.77,72.35 -24.37,49.53 -30.35,105.69 -31.07,142.44 -1.22,63.07 1.22,216.14 1.23,216.58l-13.85 0.22zm216.49 -439.34c17.47,22.75 40.96,56.05 66.08,99.4 0.27,13.62 0.62,100.64 -33.48,153.85 -24.85,-9.4 -40.14,-15.03 -40.14,-15.03 12.57,-11.04 46.61,-87.09 23.3,-91.68 -23.3,-4.6 -47.99,84.63 -47.99,84.63 -21.55,-10.35 -42.58,-21.94 -50.33,-26.28 68.93,-86.04 80.61,-179.05 82.56,-204.89zm71.3 108.53c28.78,50.84 59.27,114.6 85.02,190.51 -4.31,0.96 -8.4,-1.03 -8.4,-1.03 -42.77,-17.04 -82,-32.13 -110.36,-42.88 29.72,-47.26 33.46,-119.21 33.74,-146.6zm106.95 70.68c0,0 -16.4,-14.1 -20.54,-22.84 -4.14,-8.74 -15.18,-3.68 -13.95,4.29 1.23,7.97 11.5,45.69 12.27,51.21 0.77,5.52 20.08,6.13 21,-1.99 0.92,-8.13 2.76,-23.61 1.23,-30.66zm-88.46 28.98c0,0 -8.43,4.29 -7.51,15.49 0.92,11.19 10.89,28.36 18.09,30.66 7.21,2.3 18.7,-25.14 -10.58,-46.15zm-109.42 -240.52c15.35,-63.34 56.21,-82.7 93.65,-82.7 38.33,0 65.31,22.23 65.31,22.23 0,0 -11.65,13.03 -33.42,13.95 -21.77,0.92 -28.52,11.65 -28.98,16.41 -0.46,4.75 1.53,16.25 32.35,18.24 30.82,1.99 55.19,-25.14 55.19,-25.14 16.95,23.84 26.52,45.94 31.83,64.51 -16.87,6.83 -73.84,22.75 -197.04,-4.57 -8.01,-10.2 -14.48,-17.86 -18.9,-22.93zm217.3 32.51c7.8,30.68 3.91,50.53 3.91,50.53 -55.65,4.45 -56.73,-5.98 -77.73,-6.59 -21,-0.61 -22.69,28.06 14.41,34.19 37.1,6.13 63.01,-1.99 63.01,-1.99 -1.13,20.07 -2.53,38.3 -4.11,54.87 -17.3,-0.51 -66.77,-6.48 -137.23,-52.73l-0.13 0.2c-21.09,-34.73 -40.52,-62.06 -55.57,-81.67 118.17,25.28 175.11,10.36 193.44,3.2zm-1.01 136.18c-10.45,105.02 -28.21,141.06 -31.88,153.37 -0.95,3.17 -2.29,5.35 -3.82,6.82 -27.16,-79.89 -59.57,-146.38 .........完整代码请登录后点击上方下载按钮下载查看