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="toaster-stroke2" fill="none" stroke="#29123e" stroke-linecap="round" stroke-miterlimit="10" stroke-width="5.67" d="M598,563.5c-38.13,18.5-38.39,22-59.95,111.5-15.16,62.9-20.58,119.5-2.58,133.5" opacity=".66"/>
<g id="toaster-timer-track">
<rect width="13.09" height="129.5" x="603.5" y="580" fill="#231f20" opacity=".66" rx="6.25" ry="6.25" style="mix-blend-mode:multiply"/>
<rect width="13.09" height="129.5" x="603.5" y="580" fill="none" stroke="#29123d" stroke-miterlimit="10" stroke-width="4.25" rx="6.25" ry="6.25"/>
</g>
<g id="timer">
<path id="timer-button" d="M627.13,694.22l-34.61,10.92c-6.12,1.93-11.44-1.18-11.82-6.9l-.17-2.6c-.39-5.73,4.31-12,10.43-13.92l34.61-10.92c6.12-1.93,11.44,1.18,11.82,6.9l.18,2.6C638,686,633.25,692.29,627.13,694.22Z" fill="#f28e20" stroke="#29123e" stroke-linecap="round" stroke-linejoin="round" stroke-width="4.25"/>
<path d="M621.28,680.13a134,134,0,0,1-19.94,6.34c-2.6.61-5.31,1.17-7.48,2.73s-3.68,4.42-2.77,6.94" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="11.34" opacity="0.66" style="mix-blend-mode: overlay"/>
</g>
<g id="knob">
<g id="knob-shadow">
<path d="M637.27,754.75c-.93,12.76-9.75,20.64-10.3,21-1.66.93-9.33,2.48-15.74,2.3-8.26-.23-17.44-4.87-21-13.25a21.44,21.44,0,0,1-1.63-10c.94-12.84,12.6-24.25,26-24.25,5.63,0,11.91,0,13,.58,2.3,1.2,5.36,7.36,8,13.67A23.12,23.12,0,0,1,637.27,754.75Z" fill="#231f20" opacity="0.66" style="mix-blend-mode: multiply"/>
<path d="M637.27,754.75c-.93,12.76-9.75,20.64-10.3,21-1.66.93-9.33,2.48-15.74,2.3-8.26-.23-17.44-4.87-21-13.25a21.44,21.44,0,0,1-1.63-10c.94-12.84,12.6-24.25,26-24.25,5.63,0,11.91,0,13,.58,2.3,1.2,5.36,7.36,8,13.67A23.12,23.12,0,0,1,637.27,754.75Z" fill="none" stroke="#29123d" stroke-miterlimit="10" stroke-width="4.25"/>
</g>
<g id="knob-top">
<ellipse id="knob-main" cx="621.34" cy="753.75" rx="24.82" ry="22.8" transform="translate(-278.95 374.69) rotate(-27.67)" fill="#ffdd15" stroke="#29123e" stroke-linecap="round" stroke-linejoin="round" stroke-width="4.25"/>
<path id="knob-highlight2" d="M623.35,766.27a12.55,12.55,0,0,0,6-.4" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="11.34" style="mix-blend-mode: overlay"/>
<path id="knob-highlight1" d="M629.56,743.14a26,26,0,0,0-8.92-3.07c-3.15-.32-6.57.55-8.64,2.94a12.47,12.47,0,0,0-2.45,5.77,34.76,34.76,0,0,0-.17,13" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="11.34" style="mix-blend-mode: overlay"/>
</g>
</g>
<g id="bats" opacity=".66" style="mix-blend-mode:multiply">
<path id="bat2" fill="#29123d" d="M255.15,711.45c-2-1.24,6.37-36,21.47-40,19.23-5.1,24.9,6.44,29.45,4.09,3.31-1.71,2.94-19.6,19.1-29.15,12.25-7.23,35.88,4.38,35.44,5.83-.31,1-5.6-.73-11.11,2.11-6.44,3.32-7,11.34-10.49,13.86-2.95,2.13-4.88-2.31-12.22,2.68-5.28,3.6-2.8,7-5.36,10-1.82,2.14-7.24-8.32-16-.19-5.71,5.3-5,11-7.58,11.14-3.07.16-5.66-3.12-9.43-2.62a7.56,7.56,0,0,0-4,2.3c-2.91,2.71-4.26,9.43-6.47,10.57s-4.56-4.88-10.47-3C260.26,701.3,256.31,712.16,255.15,711.45Z" />
<path id="bat1" fill="#29123d" d="M431.94,631.57c1.57-2.26,36.18-1,38.08,13.25,2.42,18.17-10.3,26.21-8.55,30.28,1.27,3,19.77-1.09,27.22,13.11,5.66,10.75-9.8,36.76-11.22,36.61-1-.1,1.58-5.74-.54-10.67-2.48-5.75-10.66-4.68-12.74-7.64-1.76-2.51,3.1-5.35-1-11.66-2.93-4.54-6.77-1.37-9.52-3.31-1.94-1.37,9.65-8.94,2.55-16-4.62-4.62-10.61-2.72-10.37-5.29.29-3,4.06-6.3,4.1-10a4.9,4.9,0,0,0-1.79-3.49c-2.37-2.36-9.1-2.32-9.95-4.3s5.71-5.56,4.68-11.09C441.65,634.6,431,632.87,431.94,631.57Z" />
</g>
<g id="trays">
<polygon id="trays-bg2" fill="#e9578f" points="521.68 585.68 289.67 521.81 316.27 507.98 548.25 570.86 521.68 585.68"/>
<polygon id="trays-bg1" fill="#e9578f" points="564.62 561.48 332.62 497.6 358.21 484.77 590.19 547.65 564.62 561.48"/>
<polygon id="trays-shadow2" fill="#a42e8d" points="291.67 521.83 316.33 528.17 316.33 508.67 291.67 521.83"/>
<polygon id="trays-shadow1" fill="#a42e8d" points="332.62 498.17 356.28 504.5 356.28 485 332.62 498.17"/>
<polygon id="trays-stroke2" fill="none" stroke="#29123e" stroke-linecap="round" stroke-linejoin="round" stroke-width="4.25" points="564.62 561.48 332.62 497.6 358.21 484.77 590.19 547.65 564.62 561.48"/>
<polygon id="trays-stroke1" fill="none" stroke="#29123e" stroke-linecap="round" stroke-linejoin="round" stroke-width="4.25" points="521.68 585.68 289.67 521.81 316.27 507.98 548.25 570.86 521.68 585.68"/>
</g>
<path id="toaster-stroke" fill="none" stroke="#29123e" stroke-miterlimit="10" stroke-width="8.5" 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"/>
<g id="toaster-highlights" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="11.34">
<path d="M517.27,698.05a68,68,0,0,1-4,13.12" opacity=".66" style="mix-blend-mode:overlay"/>
<path d="M480.44,595l33.22,9c3.18.86,6.45,1.77,9.06,3.78,6.27,4.83,6.63,14,6.1,21.93A290.84,290.84,0,0,1,523.65,668" opacity=".66" style="mix-blend-mode:overlay"/>
<path d="M297.92,545.46c-10.38,5.22-16.71,16-21.52,26.54A199,199,0,0,0,260,630.41" opacity=".66" style="mix-blend-mode:overlay"/>
</g>
</g>
<g id="lights" style="mix-blend-mode:soft-light">
<polygon id="light1" opacity="0" fill="url(#lightGradient)" points="114.28 0 338.5 497.06 564.31 559.13 580.63 550.44 937.57 0 114.28 0" />
<polygon id="light2" opacity="0" fill="url(#lightGradient)" points="49.28 0 295.63 521.19 521.63 583.5 542.8 571.78 911.58 -0.41 49.28 0" />
</g>
<g id="toast-clip" clip-path="url(#clip1)">
<g id="toast">
<g id="right-arm">
<path d="M303.82,644.41c-8.17-3.7-17.54-5.2-26.67-.61-6.8,3.42-14.93,19.9-13.22,28.43,3.86,19.18,26.14,48.81,34.46,56.55" fill="#f28e20" stroke="#fdd8b6" stroke-linecap="round" stroke-miterlimit="10" stroke-width="8.5"/>
<path d="M301.65,667.09c-6.88-11.18-23.54-16.45-29.54-13.58-8.49,4.07-10.08,16.17-7.19,28.24,4.55,19,21.74,47.88,30.3,55.25" fill="#f28e20" stroke="#fdd8b6" stroke-linecap="round" stroke-miterlimit="10" stroke-width="8.5"/>
</g>
<path id="body" d="M298.2,675.94C283.85,773,297.2,831.83,.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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