gsap实现圣诞节l礼物从天而降点击打开礼物盒子动画效果代码
代码语言：html
所属分类：动画
代码描述：gsap实现圣诞节l礼物从天而降点击打开礼物盒子动画效果代码，结合了CustomBounce+CustomWiggle插件一起实现。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
:root {
--bgHue: 210;
--treeHue: 151;
--stroke: hsl(var(--bgHue), 90%, 5%);
--trunk: hsl(50, 50%, 20%);
--star: hsl(50, 60%, 55%);
--snow: hsl(var(--bgHue), 90%, 93%);
--giftSmallHue: 0;
--giftLargeHue: 210;
}
html, body {
height: 100%;
}
body {
background-color: hsl(var(--bgHue), 65%, 7%);
display: grid;
place-items: center;
}
svg {
max-height: 80vh;
max-width: 80vw;
}
.frame {
stroke: var(--stroke);
fill: none;
stroke-width: 10;
}
.bg > *:nth-child(1) {
fill: hsl(var(--bgHue), 50%, 69%);
}
.bg > *:nth-child(2) {
fill: hsl(var(--bgHue), 50%, 75%);
}
.bg > *:nth-child(3) {
fill: hsl(var(--bgHue), 50%, 81%);
}
.bg > *:nth-child(4) {
fill: hsl(var(--bgHue), 50%, 87%);
}
.bg > *:nth-child(5) {
fill: hsl(var(--bgHue), 50%, 93%);
}
.bg > *:nth-child(6) {
fill: hsl(var(--bgHue), 50%, 99%);
}
.fg {
fill: hsl(var(--bgHue), 50%, 99%);
}
.tree > * {
stroke: var(--stroke);
}
.tree > *:nth-child(2) {
fill: hsl(var(--treeHue), 35%, 17%);
}
.tree > *:nth-child(3) {
fill: hsl(var(--treeHue), 35%, 20.5%);
}
.tree > *:nth-child(4) {
fill: hsl(var(--treeHue), 35%, 24%);
}
.tree > *:nth-child(5) {
fill: hsl(var(--treeHue), 35%, 27.5%);
}
.tree > *:nth-child(6) {
fill: hsl(var(--treeHue), 35%, 31%);
}
.tree > *:nth-child(7) {
fill: hsl(var(--treeHue), 35%, 34.5%);
}
.tree > *:first-child {
fill: var(--trunk);
}
.tree > *:last-child {
fill: var(--star);
}
.gift {
--hue: 10;
stroke: var(--stroke);
}
.gift--large {
--hue: var(--giftLargeHue);
}
.gift--small {
--hue: var(--giftSmallHue);
cursor: pointer;
}
.gift__box {
fill: hsl(var(--hue), 52%, 52%);
}
.gift__ribbon {
stroke: var(--stroke);
}
.gift__lid {
fill: hsl(var(--hue), 50%, 58%);
}
.gift__bow {
stroke: var(--stroke);
fill: hsl(calc(var(--hue) + 50), 60%, 65%);
}
.gift__bow--front {
fill: hsl(calc(var(--hue)), 60%, 75%);
}
.gift__bow--back {
fill: hsl(calc(var(--hue)), 60%, 70%);
}
.gift__confetti path {
fill: hsl(var(--hue), 52%, 52%);
stroke: none;
}
.gift__confetti path:nth-child(2n) {
fill: hsl(calc(var(--hue) + 90), 52%, 52%);
}
.gift__confetti path:nth-child(3n) {
fill: hsl(calc(var(--hue) + 180), 52%, 52%);
}
.gift__confetti path:nth-child(7n) {
fill: hsl(calc(var(--hue) + 270), 52%, 52%);
}
.snow circle {
fill: var(--snow);
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" preserveAspectRatio="xMidYMid meet" viewBox="105.645 203.605 361 361">
<defs>
<clipPath id="frameClip">
<circle cx="286.645" cy="384.605" r="175"/>
</clipPath>
</defs>
<g clip-path="url(#frameClip)">
<g class="bg">
<rect width="383.624" height="359.468" x="102.525" y="195.83"/>
<path d="M104.417 338.038s40.113 3.445 62.376-.399c22.264-3.845 99.122-23.236 116.457-24.676 17.334-1.439 51.337-2.806 86.053 2.696 34.716 5.502 53.892 23.461 70.137 22.959 16.245-.503 43.727 15.876 43.727 15.876l1.193 201.427-198.765 15.433-164.764-27.841-16.414-205.475Z"/>
<path d="M117.032 298.155s52.338-11.743 80.286 5.613c27.949 17.355 35.602 43.449 71.49 43.479 35.888.031 97.222 19.352 142.801-11.938 45.579-31.29 55.301-26.429 64.384-27.578 9.083-1.148 3.525 245.49 3.525 245.49l-196.78 15.611-159.333-25.504-15.458-176.191 9.085-68.982Z" />
<path d="M107.74 368.182c2.858-.222 47.181 9.483 91.335 9.851 41.901.35 53.188-5.485 92.543-6.146 41.539-.699 68.364 8.749 113.309 5.889 45.213-2.877 54.503-11.944 62.599-11.083 8.096.862-10.83 185.667-10.83 185.667l-175.478 12.692-160.57-22.431s-15.766-174.216-12.908-174.439Z" />
<path d="m106.998 445.812-2.797-21.411s11.611-3.295 64.964-.953c47.514 2.085 82.576 14.514 94.141 13.897 11.565-.618 75.868 10.542 88.693 11.156 31.858 1.526 57.707-3.287 79.866-6.76 31.605-4.955 36.043-1.219 36.043-1.219l-1.583 104.539-181.845 24.316-163.184-24.828-14.298-98.737Z" />
</g>
<g class="snow">
<circle cx="301.5" cy="201.5" r="1.5"/>
<circle cx="203.632" cy="203.5" r="3.5"/>
<circle cx="121.5" cy="201.5" r="1.5"/>
<circle cx="355.175" cy="202.5" r="2.5"/>
<circle cx="196.632" cy="202.5" r="2.5"/>
<circle cx="221.5" cy="201.5" r="1.5"/>
<circle cx="167.5" cy="201.5" r="1.5"/>
<circle cx="261.5" cy="201.5" r="1.5"/>
<circle cx="227.632" cy="203.5" r="3.5"/>
<circle cx="280.175" cy="202.5" r="2.5"/>
</g>
<g class="tree">
<path d="M307.991 418.982c0-4.713-3.826-8.539-8.538-8.539h-25.615c-4.713 0-8.538 3.826-8.538 8.539v54.12c0 4.713 3.825 8.539 8.538 8.539h25.615c4.712 0 8.538-3.826 8.538-8.539v-54.12Z" style="stroke-width:3px"/>
<g class="tree__layer">
<path d="M285.912 320.193c3.951 33.491 3.455 66.297-1.49 98.419-5.324 34.593-12.434 51.204-21.329 49.835-8.895-1.369-10.681-19.35-5.356-53.942 4.944-32.122 14.335-63.559 28.175-94.312Z" style="stroke-width:3px;"/>
<path d="M290.142 320.193c26.014 21.46 48.341 45.502 66.982 72.124 20.075 28.67 26.427 45.587 19.054 50.749-7.372 5.162-21.096-6.592-41.171-35.262-18.641-26.623-33.596-55.826-44.865-87.611Z" style="stroke-width:3px;"/>
<path d="M288.201 320.193c18.356 28.289 32.421 57.932 42.194 88.928 10.524 33.38 11.495 51.423 2.911 54.13-8.583 2.706-18.137-12.631-28.662-46.011-9.773-30.996-15.254-63.345-16.443-97.047Z" style="stroke-width:3px;"/>
<path d="M283.892 320.193c-6.303 33.129-16.641 64.268-31.016 93.416-15.48 31.391-27.256 45.096-35.328 41.115-8.071-3.981-4.367-21.666 11.113-53.057 14.374-29.148 32.785-56.306 55.231-81.474Z" style="stroke-width:3px;"/>
<path d="M283.149 320.193c-11.269 31.785-26.224 60.988-44.865 87.611-20.076 28.67-33.799 40.424-41.172 35.262-7.372-5.162-1.021-22.079 19.054-50.749 18.642-26.622 40.969-50.664 66.983-72.124Z" style="stroke-width:3px;"/>
<path d="M285.09 320.193c-1.189 33.702-6.671 66.051-16.444 97.047-10.524 33.38-20.078 48.717-28.662 46.011-8.583-2.707-7.613-20.75 2.912-54.13 9.773-30.996 23.838-60.639 42.194-88.928Z" style="stroke-width:3px;"/>
<path d="M287.379 320.193c13.839 30.753 23.231 62.19 28.175 94.312 5.324 34.592 3.539 52.573-5.356 53.942-8.896 1.369-16.006-15.242-21.33-49.835-4.944-32.122-5.44-64.928-1.489-98.419Z" style="stroke-width:3px;"/>
<path d="M289.399 320.193c22.446 25.168 40.856 52.326 55.231 81.474 15.48 31.391 19.184 49.076 11.112 53.057-8.072 3.981-19.848-9.724-35.328-41.115-14.374-29.148-24.713-60.287-31.015-93.416Z" style="stroke-width:3px;"/>
<path d="M286.645 320.193c9 32.5 13.5 65 13.5 97.5 0 35-4.5 52.5-13.5 52.5s-13.5-17.5-13.5-52.5c0-32.5 4.5-65 13.5-97.5Z" style="stroke-width:3px;"/>
</g>
<g class="tree__layer">
<path d="M287.814 313.025c14.254 24.22 24.886 49.41 31.896 75.57 7.549 28.173 7.701 43.23.456 45.171-7.244 1.941-14.641-11.175-22.19-39.347-7.009-26.161-10.397-53.292-10.162-81.394Z" style="stroke-width:2.83px;"/>
<path d="M287.639 313.025c9.832 26.327 15.928 52.98 18.289 79.961 2.542 29.055.077 43.91-7.394 44.564-7.472.653-12.479-13.548-15.021-42.603-2.36-26.981-.985-54.288 4.126-81.922Z" style="stroke-width:2.83px;"/>
<path d="M284.871 313.025c-4.649 27.716-12.696 53.847-24.142 78.392-12.326 26.434-21.888 38.067-28.685 34.897-6.798-3.17-4.033-17.972 8.293-44.406 11.446-24.545 26.291-47.506 44.534-68.883Z" style="stroke-width:2.83px;"/>
<path d="M283.731 313.025c-9.39 26.488-21.853 50.824-37.387 73.009-16.729 23.892-28.166 33.687-34.31 29.385-6.143-4.301-.85-18.398 15.879-42.29 15.534-22.186 34.14-42.22 55.818-60.104Z" style="stroke-width:2.82px;"/>
<path d="M286.651 313.025c5.111 27.634 6.487 54.941 4.126 81.922-2.542 29.055-7.549 43.256-15.02 42.603-7.472-.654-9.936-15.509-7.394-44.564 2.36-26.981 8.456-53.634 18.288-79.961Z" style="stroke-width:2.83px;"/>
<path d="M285.477 313.025c.234 28.102-3.153 55.233-10.163 81.394-7.549 28.172-14.945 41.288-22.19 39.347-7.244-1.941-7.092-16.998.457-45.171 7.01-26.16 17.641-51.35 31.896-75.57Z" style="stroke-width:2.83px;"/>
<path d="M288.42 313.025c18.243 21.377 33.087 44.338 44.533 68.883 12.327 26.434 15.091 41.236 8.294 44.406-6.797 3.17-16.359-8.463-28.686-34.897-11.445-24.545-19.493-50.676-24.141-78.392Z" style="stroke-width:2.83px;"/>
<path d="M289.559 313.025c21.678 17.884 40.284 37.918 55.819 60.104 16.729 23.892 22.022 37.989 15.878 42.29-6.143 4.302-17.58-5.493-34.309-29.385-15.535-22.185-27.997-46.521-37.388-73.009Z" style="stroke-width:2.82px;"/>
</g>
<g class="tree__layer">
<path d="M289.476 305.858c17.343 14.307 32.228 30.334 44.655 48.083 13.384 19.113 17.618 30.391 12.703 33.832-4.915 3.442-14.064-4.395-27.447-23.508-12.428-17.748-22.398-37.217-29.911-58.407Z" style="stroke-width:2.65px;"/>
<path d="M286.145 305.858c6 21.667 9 43.333 9 65 0 23.333-3 35-9 35s-9-11.667-9-35c0-21.667 3-43.333 9-65Z" style="stroke-width:2.65px;"/>
<path d="M287.798 305.858c14.091 17.518 25.428 36.225 34.009 56.119 9.242 21.425 11.108 33.326 5.599 35.702-5.509 2.377-12.885-7.147-22.127-28.572-8.581-19.895-14.408-40.978-17.481-63.249Z" style="stroke-width:2.65px;"/>
<path d="M285.415 305.858c1.495 22.432.052 44.258-4.33 65.477-4.718 22.851-10.015 33.67-15.891 32.457-5.876-1.213-6.455-13.246-1.737-36.097 4.382-21.219 11.701-41.831 21.958-61.837Z" style="stroke-width:2.65px;"/>
<path d="M283.814 305.858c-7.512 21.19-17.482 40.659-29.91 58.407-13.383 19.113-22.532 26.95-27.447 23.508-4.915-3.441-.681-14.719 12.702-33.832 12.428-17.749 27.313-33.776 44.655-48.083Z" style="stroke-width:2.65px;"/>
<path d="M286.875 305.858c10.258 20.006 17.577 40.618 21.959 61.837 4.718 22.851 4.139 34.884-1.737 36.097-5.876 1.213-11.173-9.606-15.892-32.457-4.381-21.219-5.824-43.045-4.33-65.477Z" style="stroke-width:2.65px;"/>
<path d="M283.493 305.858c-3.073 22.271-8.9 43.354-17.482 63.249-9.242 21.425-16.617 30.949-22.126 28.572-5.51-2.376-3.643-14.277 5.598-35.702 8.582-19.894 19.918-38.601 34.01-56.119Z" style="stroke-width:2.65px;"/>
</g>
<g class="tree__layer">
<path d="M287.346 298.69c6.447 15.581 10.66 31.435 12.641 47.564 2.132 17.37.965 26.329-3.501 26.877-4.466.549-7.766-7.862-9.899-25.231-1.98-16.129-1.727-32.532.759-49.21Z" style="stroke-width:2.47px;"/>
<path d="M288.443 298.69c10.024 13.558 17.948 27.923 23.772 43.093 6.271 16.338 7.306 25.313 3.105 26.926-4.201 1.612-9.437-5.75-15.709-22.088-5.823-15.17-9.546-31.147-11.168-47.931Z" style="stroke-width:2.47px;"/>
<path d="M285.945 298.69c2.486 16.678 2.739 33.081.758 49.21-2.132 17.369-5.432 25.78-9.898 25.231-4.467-.548-5.634-9.507-3.501-26.877 1.98-16.129 6.194-31.983 12.641-47.564Z" style="stroke-width:2.47px;"/>
<path d="M283.397 298.69c-5.634 15.893-13.112 30.494-22.433 43.806-10.037 14.335-16.899 20.212-20.585 17.631-3.686-2.581-.511-11.04 9.527-25.375 9.321-13.311 20.484-25.332 33.491-36.062Z" style="stroke-width:2.47px;"/>
<path d="M284.848 298.69c-1.622 16.784-5.345 32.761-11.169 47.931-6.271 16.338-11.507 23.7-15.708 22.088-4.202-1.613-3.166-10.588 3.105-26.926 5.823-15.17 13.748-29.535 23.772-43.093Z" style="stroke-width:2.47px;"/>
<path d="M289.894 298.69c13.006 10.73 24.17 22.751 33.491 36.062 10.037 14.335 13.213 22.794 9.527 25.375-3.686 2.581-10.548-3.296-20.586-17.631-9.32-13.312-16.798-27.913-22.432-43.806Z" style="stroke-width:2.47px;"/>
</g>
<g class="tree__layer">
<path d="M289.811 291.523c8.671 7.153 16.114 15.167 22.327 24.041 6.692 9.557 8.809 15.196 6.352 16.916-2.458 1.721-7.032-2.197-13.724-11.754-6.214-8.874-11.199-18.608-14.955-29.203Z" style="stroke-width:2.3px;"/>
<path d="M288.164 291.523c6.119 9.43 10.807 19.31 14.064 29.642 3.509 11.127 3.832 17.141.971 18.044-2.861.902-6.046-4.211-9.554-15.337-3.258-10.332-5.085-21.115-5.481-32.349Z" style="stroke-width:2.3px;"/>
<path d="M285.127 291.523c-.397 11.234-2.224 22.017-5.481 32.349-3.509 11.126-6.693 16.239-9.554 15.337-2.862-.903-2.538-6.917.97-18.044 3.258-10.332 7.946-20.212 14.065-29.642Z" style="stroke-width:2.3px;"/>
<path d="M286.645 291.523c3 10.833 4.5 21.666 4.5 32.5 0 11.666-1.5 17.5-4.5 17.5s-4.5-5.834-4.5-17.5c0-10.834 1.5-21.667 4.5-32.5Z" style="stroke-width:2.3px;"/>
<path d="M283.48 291.523c-3.756 10.595-8.742 20.329-14.955 29.203-6.692 9.557-11.267 13.475-13.724 11.754-2.457-1.72-.34-7.359 6.351-16.916 6.214-8.874 13.657-16.888 22.328-24.041Z" style="stroke-width:2.3px;"/>
</g>
<g class="tree__layer">
<path d="M285.891 284.355c.373 5.608.012 11.065-1.083 16.369-1.18 5.713-2.504 8.418-3.973 8.115-1.469-.304-1.614-3.312-.434-9.025 1.095-5.304 2.925-10.457 5.49-15.459Z" style="stroke-width:2.12px;"/>
<path d="M284.24 284.355c-1.878 5.298-4.37 10.165-7.477 14.602-3.346 4.778-5.633 6.737-6.862 5.877-1.229-.86-.17-3.68 3.176-8.458 3.106-4.437 6.828-8.444 11.163-12.021Z" style="stroke-width:2.12px;"/>
<path d="M287.756 284.355c2.564 5.002 4.394 10.155 5.489 15.459 1.18 5.713 1.035 8.721-.434 9.025-1.469.303-2.793-2.402-3.973-8.115-1.095-5.304-1.456-10.761-1.082-16.369Z" style="stroke-width:2.12px;"/>
<path d="M289.406 284.355c4.335 3.577 8.057 7.584 11.164 12.021 3.345 4.778 4.404 7.598 3.175 8.458-1.229.86-3.516-1.099-6.862-5.877-3.107-4.437-5.599-9.304-7.477-14.602Z" style="stroke-width:2.12px;"/>
</g>
<path class="tree__star" d="M285.922 259.141a.995.995 0 0 1 1.802 0l4.438 9.435a.71.71 0 0 0 .551.401l10.344 1.305a.995.995 0 0 1 .557 1.714l-7.601 7.136a.707.707 0 0 0-.211.648l1.956 10.241a.998.998 0 0 1-1.459 1.06l-9.135-5.025a.714.714 0 0 0-.682 0l-9.135 5.025a.998.998 0 0 1-1.459-1.06l1.956-10.241a.707.707 0 0 0-.211-.648l-7.601-7.136a.995.995 0 0 1 .557-1.714l10.344-1.305a.708.708 0 0 0 .551-.401l4.438-9.435Z" style="stroke-width:2.5px"/>
</g>
<g class="snow">
<circle cx="325.175" cy="202.5" r="2.5"/>
<circle cx="197.632" cy="203.5" r="3.5"/>
<circle cx="251.5" cy="201.5" r="1.5"/>
<circle cx="291.5" cy="201.5" r="1.5"/>
<circle cx="166.632" cy="202.5" r="2.5"/>
<circle cx="381.5" cy="201.5" r="1.5"/>
<circle cx="320.632" cy="203.5" r="3.5"/>
<circle cx="341.5" cy="201.5" r="1.5"/>
<circle cx="110.5" cy="201.5" r="1.5"/>
</g>
<g class="gift gift--large">
<path class="gift__box" d="M382.806 439.861c0-7.321-5.943-13.265-13.264-13.265h-39.793c-7.321 0-13.265 5.944-13.265 13.265v39.793c0 7.32 5.944 13.264 13.265 13.264h39.793c7.321 0 13.264-5.944 13.264-13.264v-39.793Z" style="stroke-width:3px"/>
<path class="gift__ribbon" d="M317.185 453.409h64.92" style="stroke-width:3px"/>
<path class="gift__ribbon" d="M349.645 492.868v-64.919" style="stroke-width:3px"/>
<g>
<path class="gift__bow gift__bow--right gift__bow--back" d="M346.795 425.992s12.436-3.548 15.861-6.973a6.289 6.289 0 0 0 0-8.888 6.288 6.288 0 0 0-8.887 0c-3.425 3.426-6.974 15.861-6.974 15.861Z" style="stroke-width:3px"/>
<path class="gift__bow gift__bow--left gift__bow--back" d="M350.495 425.992s-3.548-12.435-6.973-15.861a6.288 6.288 0 0 0-8.887 0 6.287 6.287 0 0 0 0 8.888c3.425 3.425 15.86 6.973 15.86 6.973Z" style="stroke-width:3px"/>
<path class="gift__bow gift__bow--left gift__bow--front" d="M348.899 426.287s-9.29-8.995-13.969-10.249a6.288 6.288 0 0 0-7.697 4.444 6.287 6.287 0 0 0 4.444 7.696c4.679 1.254 17.222-1.891 17.222-1.891Z" style="stroke-width:3px"/>
<path class="gift__bow gift__bow--right gift__bow--front" d="M350.391 426.287s12.544 3.145 17.223 1.891a6.286 6.286 0 0 0 4.443-7.696 6.286 6.286 0 0 0-7.696-4.444c-4.679 1.254-13.97 10.249-13.97 10.249Z" style="stroke-width:3px"/>
</g>
</g>
<g class="snow">
<circle cx="347.632" cy="203.5" r="3.5"/>
<circle cx="275.175" cy="202.5" r="2.5"/>
<circle cx="221.5" cy="201.5" r="1.5"/>
<circle.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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