会放刺的仙人掌动画效果代码
代码语言：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-3 14.7-16.3 14-34.7-.7-18.3-6.5-48.9-45.3-58C34.3 1.9 14.6 54.5 14.2 65.4c-.5 11.5-.1 25 5.8 35.2 4.8 8.4 15.3 11.5 24.1 13.3 10.5 2.2 21.1 3.3 31.8 3.4z" fill="#7ba640"/>
<g>
<defs>
<path id="SVGID_1_" d="M75.9 117.3c29.4.1 41.5-5.8 48.8-8.8 7.3-3 14.7-16.3 14-34.7-.7-18.3-6.5-48.9-45.3-58C34.3 1.9 14.6 54.5 14.2 65.4c-.5 11.5-.1 25 5.8 35.2 4.8 8.4 15.3 11.5 24.1 13.3 10.5 2.2 21.1 3.3 31.8 3.4z"/>
</defs>
<clipPath id="SVGID_8_">
<use xlink:href="#SVGID_1_" overflow="visible"/>
</clipPath>
<path class="st8" d="M19.1 104.7c37.8 14.5 63.3 9.8 80.8 4 12.8-4.2 19.4-20.3 20.2-33.9 1-17-7.2-36.3-8.8-39.7-19.2 1.8-29.8-7.2-31.8-12.3-2-5 27.5-5.3 30.4-4.7 3 .6 36.3 30.1 38.8 38.3s-.5 52.1-8 58.4-49.7 12.7-64.2 10.9c-46.5-5.7-57.4-21-57.4-21z"/>
<path d="M99.7 124.1c6.3-2 20.7-11.3 27.7-24.9 4.9-9.4 6.5-28.5 2.5-42.5 1 16.2 2.3 27.4-4.8 40.8-5.9 11.3-13.8 20.9-39.3 23.9 3.2 1.5 13.9 2.7 13.9 2.7z" clip-path="url(#SVGID_8_)" fill="#7ba640"/>
<path class="st8" d="M97.7 117.2c6.5-3.6 14.5-15.3 17.2-32 2.1-13.4.7-31-5.3-42.9 1.2 11.8 3.6 27.5 0 41.9-4 15.8-9.7 24.5-36.2 29.9 9.2 3.6 24.3 3.1 24.3 3.1z"/>
<path class="st8" d="M66.3 117.7c-6.1-1.1-29-3.5-33.3-23.9-2.8-13.6-.4-26.7 4.7-41.7-7.2 10.6-9.9 27-8.3 41.5C31 108 39 114.2 44.8 117.2c3.2 1.7 21.5.5 21.5.5z"/>
<path d="M30.8 29C40.4 18.3 68.6 6 68.6 6l18.5 12.9.3 2.1c-.4 0-1.4 3.6-4.2 2.2-13.4 1.7-32 19-35.5 33.4 5.7-20.3 9.5-26.1 19.2-33-15.2 3.9-34.3 18.9-39 43.5.8-16.8 13.5-37.5 23.4-42.3-22.6 7.3-36 36.1-32.1 60.9C14 72.1 14.6 47.3 30.8 29z" clip-path="url(#SVGID_8_)" fill="#98b54d"/>
</g>
<g>
<path class="st11" d="M92.4 19.3c2.7.1 6-8.8 5.2-15.1-.9-6.7-20.8-3-20.1 1.1.6 4 9.8 13.7 14.9 14z"/>
<g>
<g>
<g>
<path class="st12" d="M82.8 2.1c.9-.3 2.6-.7 4.7-.9 2.1-.2 4.5-.3 6.6.3 1.1.3 2 .8 2.5 1.5.3.4.4.8.5 1.2.1.5.1.9.2 1.3.1 1.6.1 2.6.3 2.6.1 0 .4-1 .4-2.7 0-.4 0-.9-.1-1.3-.1-.5-.2-1.1-.6-1.6-.6-1-1.8-1.6-2.9-2-2.3-.7-4.9-.7-7-.5-2.1.2-3.9.7-4.9.9-.5.1-1.2.3-2 .7-.8.3-1.7.7-2.6 1.5-.4.4-.9.9-1 1.7 0 .4.1.7.2 1l.3.9c.5 1.3 1.2 2.3 1.9 3.2 2.9 3.8 6.3 6.2 6.5 6 .2-.2-3-2.9-5.7-6.6-.7-.9-1.3-1.9-1.7-2.9-.1-.3-.2-.5-.3-.8-.1-.2-.2-.5-.1-.6 0-.3.3-.7.7-1 .7-.6 1.6-1 2.3-1.3.7-.3 1.3-.5 1.8-.6z"/>
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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