会放刺的仙人掌动画效果代码-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:#1.........完整代码请登录后点击上方下载按钮下载查看