gsap打开宝盒放出精灵动画效果代码
代码语言：html
所属分类：动画
代码描述：gsap打开宝盒放出精灵动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
body {
min-height: 100vh;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: #653a95;
}
svg {
width: 90vw;
min-width: 300px;
max-height: 90vh;
}
#button-trigger {
cursor: pointer;
}
</style>
</head>
<body >
<!-- totally inspired from Akkadayo's original idea https://www.instagram.com/p/CG8iOU_hOSB/?igshid=wqyyq9vwgvyy -->
<svg viewBox="0 0 948 948" aria-labelledby="uniqueTitleID uniqueDescID" role="img">
<title id="uniqueTitleID">Halloween toast</title>
<desc id="uniqueDescID">Click or touch the toaster button for a surprise!</desc>
<defs>
<linearGradient id="lightGradient" x1="480" x2="480" y1="584" y2="-.4" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#f28e20"/>
<stop offset="1" stop-color="#f28e20" stop-opacity="0"/>
</linearGradient>
<clipPath id="clip1">
<polygon points="0 0 948 0 547.39 569.06 521.63 583.5 295.63 521.19 275.82 521.1 0 0" fill="#231f20"/>
</clipPath>
<clipPath id="clip2">
<polygon points="0 0 948 0 580.63 550.44 564.31 559.13 338.5 497.06 195.67 96.33" fill="#000"/>
</clipPath>
</defs>
<g id="bg" >
<rect width="948" height="948" fill="#653a95"/>
<g id="stars" opacity=".66" style="mix-blend-mode:overlay">
<polygon fill="#fff" points="166.94 149.87 156.77 147.09 148.71 153.89 148.21 143.36 139.25 137.8 149.11 134.07 151.63 123.83 158.23 132.05 168.75 131.28 162.96 140.1 166.94 149.87" />
<polygon fill="#fff" points="780.48 117.74 769.21 104.37 751.8 106.08 761.03 91.22 754.02 75.19 771 79.38 784.08 67.76 785.35 85.21 800.44 94.06 784.24 100.65 780.48 117.74" />
<polygon fill="#fff" points="750.48 327.88 740.69 325.45 733.14 332.12 732.44 322.07 723.75 316.95 733.1 313.17 735.28 303.33 741.76 311.05 751.8 310.08 746.46 318.63 750.48 327.88" />
<polygon fill="#fff" points="229.72 321.56 226.68 315.4 219.88 314.41 224.8 309.62 223.64 302.85 229.72 306.04 235.8 302.85 234.64 309.62 239.56 314.41 232.76 315.4 229.72 321.56" />
<polygon fill="#fff" points="131.53 416.88 119.48 417.76 113.37 428.18 108.82 416.99 97.02 414.4 106.25 406.61 105.07 394.59 115.33 400.96 126.4 396.12 123.51 407.85 131.53 416.88" />
<polygon fill="#fff" points="806.3 451.39 799.03 450.88 794.48 456.58 792.72 449.5 785.9 446.94 792.08 443.08 792.41 435.8 797.99 440.49 805.02 438.55 802.29 445.31 806.3 451.39" />
<polygon fill="#fff" points="396.4 114.05 391.03 108.9 383.74 110.41 386.98 103.71 383.29 97.25 390.67 98.25 395.68 92.75 397 100.07 403.78 103.14 397.22 106.66 396.4 114.05" />
</g>
</g>
<ellipse id="shadow"cx="458.88" cy="764.02" fill="#231f20" opacity=".33" rx="336.2" ry="110.55" style="mix-blend-mode:multiply"/>
<g id="toaster">
<path id="toaster-bg" fill="#1f98d5" d="M675.59,770.18a57.86,57.86,0,0,1-17.65,12.57c-33.32,16.42-50.46,24.78-73.85,31.91-10.57,3.23-19.27,5.4-30.36,5.76a86.44,86.44,0,0,1-21.67-1.67C521.19,816.2,281,741,259.52,733.67c-.8-.28-14.44-6.42-18-9.84C239.22,721.65,229,713,229,696.75c0-36.5,5.73-61.29,16.74-100.75,12.57-45,18.83-69,36.44-92.61,13.49-18.1,34.34-23.45,41.76-24.08a57.45,57.45,0,0,1,13.7,1l269,72.67c3.82.76,3.82.76,10.21,2.45a57.17,57.17,0,0,1,15.84,6.46c8.28,5.1,11.44,11,14.12,16C657,597,668.51,620.42,677.61,648.47a389.6,389.6,0,0,1,15.14,65.37c.27,8.11.08,27.14-8.47,43.72A53.2,53.2,0,0,1,675.59,770.18Z"/>
<path id="toa.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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