gsap+svg实现圣诞主题物品变形动画效果代码
代码语言：html
所属分类：动画
代码描述：gsap+svg实现圣诞主题物品变形动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body {
background-color: #1e792c;
overflow: hidden;
text-align:center;
display: flex;
align-items: center;
justify-content: center;
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
svg {
width: 100%;
height: 100%;
visibility: hidden;
}
</style>
</head>
<body>
<svg id="mainSVG" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
<defs>
<filter id="glow" x="-100%" y="-100%" width="250%" height="250%">
<feGaussianBlur stdDeviation="12" result="coloredBlur" />
<feOffset dx="0" dy="0" result="offsetblur"></feOffset>
<feFlood id="glowAlpha" flood-color="#FFC1C1" flood-opacity="0.5"></feFlood>
<feComposite in2="offsetblur" operator="in"></feComposite>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
<radialGradient id="redGrad" cx="9" cy="9" r="12" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#fff"/>
<stop offset="1" stop-color="#c30f16"/>
</radialGradient>
<ellipse cx=0 cy=0 class="dot" rx="2" fill="red"/>
<g id="pathContainer">
<path id="ginger" d="M420.71,229.18a43.2,43.2,0,1,0-49.19,0l-44.69-8.4-8.71,45.31,38.7,7.19v45l-18.6,71.4,44.69,11.7,13.2-51,13.5,51,44.69-11.7-18.6-71.4v-45l38.42-7.19-8.7-45.31Zm-40.19-53.69A7.5,7.5,0,1,1,373,183,7.43,7.43,0,0,1,380.52,175.49Zm31.2,15a7.5,7.5,0,1,1,7.5-7.5A7.43,7.43,0,0,1,411.72,190.49Zm6.9,18a30.52,30.52,0,0,1-45,0,3.21,3.21,0,1,1,5.1-3.9,23.93,23.93,0,0,0,34.8,0,3.33,3.33,0,0,1,4.5-.6,3,3,0,0,1,.6,4.5Zm-22.5,54.6a7.5,7.5,0,1,1,7.5-7.5A7.43,7.43,0,0,1,396.12,263.09Zm0,25.19a7.5,7.5,0,1,1,7.5-7.5A7.43,7.43,0,0,1,396.12,288.28ZM283,236.08a23.18,23.18,0,0,0,18.31,27l7.5,1.5,8.69-45.3-7.5-1.5c-12.6-2.39-24.9,5.71-27,18.3Zm226.19,0a23,23,0,0,0-27-18.3l-7.5,1.5,8.7,45.31,7.5-1.5a23.09,23.09,0,0,0,18.3-27ZM333.71,406.49a23.1,23.1,0,0,0,44.7,11.69l1.8-7.19-44.69-11.7Zm123-7.21L412,411l1.81,7.2a23.1,23.1,0,1,0,44.69-11.7Z" transform="translate(-246.26 -123.64)" fill="#8c6239"/>
<path id="gift" d="M505.78,239.07H449.55c16.32-3,32-8.7,38.46-19.43,3-5,7-15.16,1-26.41-6.51-12.05-17.29-12.86-23.8-12.86-17.38,0-37,19-49.59,33.78,6.53-14.51,11.72-32.35,4.9-43.7-3-5-8.68-13-22.84-13.4-13.22-.35-20.77,6.61-24.06,10.84-8.69,11.28-3.54,30.64,3.59,46.93C364.63,200,344.67,180.37,327,180.37c-6.5,0-17.29.79-23.8,12.85-6.07,11.25-2,21.4,1,26.42,6.44,10.72,22.15,16.41,38.46,19.43l-56.19,0a12.88,12.88,0,0,0-12.88,12.88v40.39h245.1V251.93A12.87,12.87,0,0,0,505.78,239.07ZM324.22,206.66c5.24-11.29,30.87,5,43.45,20.21C344.39,225.4,319,217.94,324.22,206.66Zm72.46,13.46c-9.33-18.44-17.1-41.82-.9-41.82S405,204.64,396.68,220.12ZM468,206.66c5.22,11.27-20.18,18.73-43.45,20.21C437.14,211.66,462.78,195.37,468,206.66ZM285.47,304.59H389.26V419.53H298.35a12.87,12.87,0,0,1-12.88-12.88Zm221.29,0V406.65a12.86,12.86,0,0,1-12.87,12.88H403V304.59Z" transform="translate(-246.26 -123.64)"/>
<path id="sleigh" d="M551.22,310.3a11.1,11.1,0,0,0-16.55,14.79c12.68,14.21,2.6,37-16.57,37H462.59V339.9h16.78a22.21,22.21,0,0,0,21.27-15.83l24.27-80.92a11.09,11.09,0,0,0-10.62-14.28H486a22.51,22.51,0,0,0-18.27,9.59c-9.34,13-29.54,34.82-60.63,34.82-22.21,0-33.31-22.2-33.31-33.31,0-49.05-50.88-77.72-99.93-77.72h-22.2l40.2,160.82a22.2,22.2,0,0,0,21.54,16.83h4.87v22.2H262.74a11.11,11.11,0,0,0,0,22.21H518.1c38.3,0,58.54-45.58,33.12-74ZM340.46,339.9h99.92v22.2H340.46Z" transform="translate(-246.26 -123.64)" fill="#2e3192"/>
<path id="snowman" d="M396.12,447.34c-96.22,0-87.39-59.92-87.39-116.78,0-43.08,21.43-80.84,53.59-102a55.44,55.44,0,1,1,67.61,0c32.16,21.13,53.59,58.89,53.59,102C483.52,387.42,492.35,447.34,396.12,447.34ZM378.89,156.82c-2.86,0-3.92,2.16-3.92,5s2.75,3.78,5.61,3.78,4.76-.92,4.76-3.78S381.75,156.82,378.89,156.82Zm31.29.67c-3.13,0-7.55,1.9-7.55,4.25s3.29,5.28,6.42,5.28,4.9-2.93,4.9-5.28S413.31,157.49,410.18,157.49Zm22.09,27.45c0,3.41-30.56,8.41-35.94,8.41s-9.74-3.76-9.74-8.41,4.36-8.42,9.74-8.42S432.27,181.93,432.27,184.94Zm-11.5,19.84c-7.09,7.1-15.55,11.22-24.64,11.22-7.64,0-14.84-2.92-21.16-8.08M405.81,277c-1.38-5-6.4-11.27-10.17-10.23s-7,7.62-5.62,12.64,6.87,6.57,10.64,5.53S407.2,282,405.81,277Zm-4.39,43.63c3-4.27,4.61-12.11,1.41-14.36s-10.33-.56-13.32,3.71-.7,9.48,2.5,11.73S398.43,324.89,401.42,320.63Zm-5,26.25c-5.16,0-7.06,3.9-7.06,9.05s5,6.82,10.1,6.82,8.55-1.66,8.55-6.82S401.55,346.88,396.4,346.88Zm5.18,41.17c-5.15-.75-12.89,1.33-13.45,5.2s4.15,9.48,9.3,10.23,8.79-3.64,9.35-7.51S406.73,388.81,401.58,388.05Z" transform="translate(-246.26 -123.64)" fill-rule="evenodd"/>
<path id="hat" d="M546,239.05a29.31,29.31,0,0,1-58.62,0,29,29,0,0,1,.28-4l-1.66.12c-9.92-.15-28.28,1.4-38.29,13.27-7.32,8.62-9,20.72-4.32,35.76a96.29,96.29,0,0,0,15.52,31.93A215.45,215.45,0,0,1,391.45,338c-70.69,7.64-116.39-18.19-126.57-24.61.75-14.67,6.52-31.73,17.16-50.48A143.24,143.24,0,0,1,352,199.24c59.74-23.8,119.76,3.89,143.73,17.45a10.32,10.32,0,0,1,.87,1A29.31,29.31,0,0,1,546,239.05Zm-79.5,84.36a217.43,217.43,0,0,1-73.78,24.47,241.5,241.5,0,0,1-27.42,1.5c-57.8-.14-94.69-20.48-105-27.28a33.11,33.11,0,0,0-13.73,20.53,30.16,30.16,0,0,0,4.83,20.67C279.93,398,359.9,396.12,360.7,396.12h1.17c73.31,0,104.62-25.13,105.14-25.36,8.62-6.8,13-14.07,13-21.75C480,337.71,471.18,327.68,466.49,323.41Z" transform="translate(-246.26 -123.64)"/>
<path id="bauble" d="M493.41,309a103,103,0,1,1-103-103A103,103,0,0,1,493.41,309ZM488.31,277c-9.92,6.72-12.72,24-27.16,24-17.92,0-17.92-26.65-35.83-26.65S407.4,301,389.5,301s-17.92-26.65-35.83-26.65S335.76,301,317.84,301c-13.69,0-16.91-15.58-25.68-22.91m201.16,34.85c-14.35,3.34-15.56,26.24-32.17,26.24-17.92,0-17.92-26.65-35.83-26.65s-17.92,26.65-35.82,26.65-17.92-26.65-35.83-26.65-17.91,26.65-35.83,26.65c-15.85,0-17.66-20.87-30.3-25.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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