会放刺的仙人掌动画效果代码-html代码-BFW代码库

会放刺的仙人掌动画效果代码

代码语言：html

所属分类：动画

代码描述：会放刺的仙人掌动画效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
<style>
body {
  overflow: hidden;
  background: white;
  touch-action: none;
}

svg {
  position: fixed;
  left: 50%;
  bottom: 0;
  height: 50vh;
  transform: translate(-50%);
  z-index: 1;
  touch-action: none;
  -wekbit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
svg .closed-eye {
  opacity: 0;
}
svg .cactus {
  cursor: pointer;
  transform-origin: 88px 106px;
  transition: 0.3s cubic-bezier(0, 1.06, 0.82, 1.55);
}
svg:active .open-eyes {
  opacity: 0;
}
svg:active .closed-eye {
  opacity: 1;
}

.particle {
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: none;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='6.5' height='10.9' viewBox='0 0 6.5 10.9'><path d='M6.4 9.2C7 6.9 4.2-.1 2.9 0 1.6.1-.3 7.8 0 8.8c1.2 3.1 5.3 2.3 6.4.4z' fill='%23587434'/></svg>");
}
</style>




</head>

<body translate="no" >
  <!-- Cactus from https://www.freepik.com/free-vector/enjoyable-cacti-set_853959.htm -->
<svg viewBox="0 -5 157.9 210">
  <style>
    .st1{fill:#d78d40}.st6,.st8{fill:#587434}.st8{clip-path:url(#SVGID_8_)}.st11{fill:#e8a2c1}.st12{fill:#a4466d}.st14{fill:#e35c98}.st15{fill:#1c2816}.st16{fill:#f2f6dc}
  </style>
  <ellipse cx="89.3" cy="192.1" rx="68.6" ry="13.1" fill="#efdbc7"/>
  <g>
    <path class="st1" d="M12.2 131.5c2.3 8 10.9 52.7 15 58.5s34.8 10.4 48.7 10.4 41.2-2.4 45.8-7.4 17.9-61.5 17.9-61.5H12.2z"/>
    <g>
      <defs>
        <path id="SVGID_4_" d="M12.2 131.5c2.3 8 10.9 52.7 15 58.5s34.8 10.4 48.7 10.4 41.2-2.4 45.8-7.4 17.9-61.5 17.9-61.5H12.2z"/>
      </defs>
      <clipPath id="SVGID_5_">
        <use xlink:href="#SVGID_4_" overflow="visible"/>
      </clipPath>
      <path d="M157.3 107.8c.4-7.8-41.4-16.6-73.4-19.1-29-2.2-73.4 1.9-81.4 8.6-.5.3-.8.7-1.1 1.3-.1.3-.2.5-.2.8-.7 5.1.6 36.7 4.4 42.5 3.8 5.8 35.8 15.3 70.8 17.2 34.1 1.8 58.6-5.6 63.7-8.8 5.2-3.2 17.3-28.4 17.2-42.5z" clip-path="url(#SVGID_5_)" fill="#d78d40"/>
    </g>
    <path class="st1".........完整代码请登录后点击上方下载按钮下载查看