会放刺的仙人掌动画效果代码
代码语言：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" d="M156.3 97.5c0-7.8-42.3-14.4-74.3-15.1-29.1-.6-73.1 5.8-80.8 13-.5.3-.8.7-1 1.3-.1.3-.2.5-.2.8-.4 5.1 2.6 36.6 6.7 42.2S43.4 153 78.4 153c34.2 0 58.2-8.8 63.2-12.2 4.9-3.4 15.6-29.2 14.7-43.3z"/>
<g>
<defs>
<path id="SVGID_3_" d="M156.3 97.5c0-7.8-42.3-14.4-74.3-15.1-29.1-.6-73.1 5.8-80.8 13-.5.3-.8.7-1 1.3-.1.3-.2.5-.2.8-.4 5.1 2.6 36.6 6.7 42.2S43.4 153 78.4 153c34.2 0 58.2-8.8 63.2-12.2 4.9-3.4 15.6-29.2 14.7-43.3z"/>
</defs>
<clipPath id="SVGID_6_">
<use xlink:href="#SVGID_3_" overflow="visible"/>
</clipPath>
<path d="M8.2 98c0-6.4 40.2-17.3 70.2-16.7 0 0-83.5-9.3-78.2 15.5-3.2 23.2 90.5 32.1 119.3 18.4-37.1-1-111.3-8.8-111.3-17.2z" clip-path="url(#SVGID_6_)" fill="#deb387"/>
</g>
<path d="M4.5 98.1c0 8.2 30.9 21.9 73.7 21.9s73.8-14.8 74-21.6c.1-5.1-41.3-13.6-70.5-14.3-29.2-.6-77.2 7.7-77.2 14z" fill="#573a1c"/>
<g>
<defs>
<path id="SVGID_2_" d="M4.5 98.1c0 8.2 30.9 21.9 73.7 21.9s73.8-14.8 74-21.6c.1-5.1-41.3-13.6-70.5-14.3-29.2-.6-77.2 7.7-77.2 14z"/>
</defs>
<clipPath id="SVGID_7_">
<use xlink:href="#SVGID_2_" overflow="visible"/>
</clipPath>
<path d="M4.5 107.1c0 8.2 30.9 21.9 73.7 21.9s73.8-14.8 74-21.6c.1-5.1-41.3-13.6-70.5-14.3-29.2-.6-77.2 7.7-77.2 14z" clip-path="url(#SVGID_7_)" fill="#2d1c0f"/>
</g>
</g>
<g class="cactus">
<g class="hidden">
<path class="st6" d="M16.8 91.3c-2.4-.1-8.7 4.1-8.3 5.3.4 1.3 8.3 1.6 9.2 1 2.9-1.7 1.2-5.5-.9-6.3z"/>
<path class="st6" d="M15.3 60.9c-2.2-1-9.6.4-9.7 1.6-.2 1.4 7 4.7 8.1 4.6 3.3-.5 3.2-4.7 1.6-6.2z"/>
<path class="st6" d="M35.5 28.4c-1.4-1.9-8.6-4.3-9.3-3.3-.8 1.1 3.8 7.5 4.8 7.9 3.1 1.1 5.1-2.5 4.5-4.6z"/>
<path class="st6" d="M65.4 14.9c.3-2.4-3.2-9.1-4.4-8.8-1.4.2-2.5 8.1-2 9.1 1.4 2.9 5.4 1.7 6.4-.3z"/>
<path class="st6" d="M133.6 49.4c2.4-.3 7.9-5.4 7.4-6.5-.6-1.3-8.4-.3-9.3.4-2.5 2.1-.2 5.7 1.9 6.1z"/>
<path class="st6" d="M136.6 88.8c2.2.8 9.5-1.2 9.6-2.4 0-1.4-7.4-4.1-8.4-3.9-3.2.7-2.9 4.9-1.2 6.3z"/>
</g>
<path d="M75.9 117.3c29.4.1 41.5-5.8 48.8-8.8 7.3.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0