svg+gsap实现带音效圣诞老人拖拉进入盒子动画代码
代码语言：html
所属分类：动画
代码描述：svg+gsap实现带音效圣诞老人拖拉进入盒子动画代码
代码标签： svg gsap 音效 圣诞 老人 拖拉 进入 盒子
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@import url('https://fonts.googleapis.com/css2?family=Mountains+of+Christmas:wght@700&display=swap');
body, html {
margin: 0;
padding: 0,
height: 100vh;
background-color: #ece9f0;
font-family: 'Mountains of Christmas', cursive;
}
svg {
position: fixed;
height: 95vh;
bottom: 0;
left: 50%;
transform: translate(-50%);
max-height: 900px;
overflow: visible;
}
.scene {
opacity: 0;
position: relative;
}
#santa {
cursor: pointer;
}
h2, p {
position: absolute;
top: 0;
left: 0;
width: 100vw;
text-align: center;
font-size: 5vw;
opacity: 0.8
}
.merry, .ho {
opacity: 0
}
@media only screen and (max-width: 600px) {
svg {
height: 70vh
}
}
</style>
</head>
<body >
<div class="scene">
<h2 class="text intro">Santa's stuck! Help to pull him out...</h2>
<p class="text ho">HO HO HOORAY!</p>
<p class="text merry">Merry Christmas from the GSAP team!</p>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 440.47 736.94">
<defs>
<clipPath id="clip-path">
<rect x="177.25" y="600.55" width="82.26" height="6.02" fill="none" />
</clipPath>
<clipPath id="clip-path-2">
<rect id="SVGID" x="171.73" y="619.68" width="95.97" height="89.5" fill="none" />
</clipPath>
<clipPath id="clip-path-3">
<polygon id="SVGID-2" fill="none" points="356.1 709.81 387.98 502.19 398.7 503.61 375.66 712.39 356.1 709.81 356.1 709.81" data-name="SVGID" />
</clipPath>
</defs>
<g id="pole">
<polygon points="356.1 709.81 387.98 502.19 398.7 503.61 375.66 712.39 356.1 709.81 356.1 709.81" fill="#fff" />
<g clip-path="url(#clip-path-3)">
<g id="progress">
<rect x="330.82" y="690.46" width="70.16" height="9.48" transform="translate(527.83 -73.54) rotate(39.65)" fill="#d04f6c" />
<rect x="333.63" y="669.1" width="70.16" height="9.48" transform="translate(514.85 -80.25) rotate(39.65)" fill="#d04f6c" />
<rect x="336.45" y="647.75" width="70.16" height="9.48" transform="translate(501.87 -86.96) rotate(39.65)" fill="#d04f6c" />
<rect x="339.27" y="626.39" width="70.16" height="9.48" transform="translate(488.89 -93.68) rotate(39.65)" fill="#d04f6c" />
<rect x="342.09" y="605.04" width="70.16" height="9.48" transform="translate(475.91 -100.39) rotate(39.65)" fill="#d04f6c" />
<rect x="344.9" y="583.68" width="70.16" height="9.48" transform="translate(462.93 -107.1) rotate(39.65)" fill="#d04f6c" />
<rect x="347.72" y="562.32" width="70.16" height="9.48" transform="translate(449.95 -113.81) rotate(39.65)" fill="#d04f6c" />
<rect x="350.54" y="540.97" width="70.16" height="9.48" transform="translate(436.97 -120.52) rotate(39.65)" fill="#d04f6c" />
<rect x="353.35" y="519.61" width="70.16" height="9.48" transform="translate(423.99 -127.23) rotate(39.65)" fill="#d04f6c" />
</g>
</g>
<circle id="light" cx="393.93" cy="498.47" r="12.12" transform="translate(-222.95 346.44) rotate(-37.84)" fill="white" />
<g clip-path="url(#clip-path-4)">
<path d="M389.58,489.68a2.57,2.57,0,0,1,2.58-.14c1.53,1,1.08,4,2.86,4.4,1.21.27,2.12-1,3.23-1.6a3.61,3.61,0,0,1,4.27,1.17,6.24,6.24,0,0,1,1.05,4.56,25,25,0,0,1-1.25,4.63,7.19,7.19,0,0,0-.47,3.16,2.39,2.39,0,0,0,4.6.89,7.9,7.9,0,0,0,.85-3.07c.52-3.85,1-7.86-.12-11.58a13.71,13.71,0,0,0-9.41-9c-4.3-1.14-9.68,0-12.81,3.33-1.07,1.14-1.9,3.17-.79,4.6C385.78,493.07,388.09,490.5,389.58,489.68Z" fill="#eef9ff" />
</g>
</g>
<rect id="flipTarget" opacity="0" x="135.72589111328125" y="304.58001708984375" width="163.54409790039062" height="390.00006103515625" opacity="0.2"></rect>
<rect id="container" x="120" width="200" height="603" y="0" opacity="0"></rect>
<rect id="dropArea" x="120" width="200" height="200" y="0" opacity="0"></rect>
<g id="santa">
<g id="body">
<path id="start-body" d="M299.27,551.09c0,47.32-35.55,51.57-80.4,51.57s-82-4.25-82-51.57,38-126.29,82.84-126.29S299.27,503.77,299.27,551.09Z" fill="#d04f6c" />
</g>
<g id="bottom">
<g id="legs">
<g id="legs-2" data-name="legs">
<g id="left-leg" class="appendage leg">
<path id="left-leg-start" d="M202.73,613.77s-3.34,17.75,1,56.24" fill="none" stroke="#d04f6c" stroke-linecap="round" stroke-linejoin="round" stroke-width="7.74" />
<path id="left-leg-end" opacity="0" d="M202.63,613.77s1.82,33.08-24.18,48.38" fill="none" stroke="#d04f6c" stroke-linecap="round" stroke-linejoin="round" stroke-width="7.74" />
<g id="shoe-left">
<path d="M210.59,666.27a6.16,6.16,0,0,1-3.76,7.86l-3,1a6.16,6.16,0,0,1-7.86-3.77h0a6.16,6.16,0,0,1,3.77-7.86l3-1a6.17,6.17,0,0,1,7.86,3.77Z" fill="#fff" />
<rect x="190.91" y="675.68" width="25.56" height="12.23" rx="6.12" transform="translate(-478.1 885.48) rotate(-90)" fill="#2d2b29" />
</g>
</g>
<g id="right-leg" class="appendage leg">
<path id="right-leg-start" d="M236.36,613.77s3.34,17.75-1,56.24" fill="none" stroke="#d04f6c" stroke-linecap="round" stroke-linejoin="round" stroke-width="7.74" />
<path id="right-leg-end" opacity="0" d="M236.36,613.77s-4.94,36.75,26.42,46" fill="none" stroke="#d04f6c" stroke-linecap="round" stroke-linejoin="round" stroke-width="7.74" />
<g id="shoe-right">
<path d="M228.5,666.27a6.16,6.16,0,0,0,3.77,7.86l3,1a6.16,6.16,0,0,0,7.86-3.77h0a6.16,6.16,0,0,0-3.76-7.86l-3-1a6.17,6.17,0,0,0-7.86,3.77Z" fill="#96bc7d" />
<rect x="222.62" y="675.68" width="25.56" height="12.23" rx="6.12" transform="translate(-446.39 917.2) rotate(-90)" fill="#96bc7d" />
</g>
</g>
</g>
<path id="bum" d="M257.21,606.37c0,15.58-16.81,17-38,17s-38.78-1.4-38.78-17,18-41.56,39.17-41.56S257.21,590.8,257.21,606.37Z" fill="#d04f6c" />
</g>
<g id="belt">
<g clip-path="url(#clip-path)">
<path d="M257.25,605.91c0,15.58-16.81,17-38,17s-38.78-1.4-38.78-17,18-41.56,39.16-41.56S257.25,590.34,257.25,605.91Z" fill="#fcfcfc" />
</g>
<rect x="213.04" y="599.37" width="12.47" height="8.39" fill="none" stroke="#e7c838" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.82" />
</g>
</g>
<g id="arms">
<g id="right-arm" class="appendage arm">
<path id="down-arm-right" d="M249.55,441.58s70.8,69.66,40.28,178.06" fill="none" stroke="#d04f6c" stroke-linecap="round" stroke-linejoin="round" stroke-width="7.74" />
<g id="right-hand">
<path d="M278.2,628.76a2.82,2.82,0,0,0,.31,4h0a2.81,2.81,0,0,0,4-.3l5.7-6.66a2.81,2.81,0,0,0-.31-4h0a2.81,2.81,0,0,0-4,.3Z" fill="#e09d9f" />
<path d="M281.31,636.78a4.84,4.84,0,0,0,3.68,5.77h0a4.83,4.83,0,0,0,5.77-3.67l3.26-14.7a4.85,4.85,0,0,0-3.68-5.77h0a4.84,4.84,0,0,0-5.77,3.68Z" fill="#f3d9c8" />
<path d="M282.93,615.9a6.16,6.16,0,0,0,3.77,7.86l3,1a6.17,6.17,0,0,0,7.86-3.77h0a6.16,6.16,0,0,0-3.76-7.86l-3-1a6.16,6.16,0,0,0-7.86,3.77Z" fill="#fff" />
</g>
</g>
<g id="left-arm" class="appendage arm">
<path id="down-arm-left" data-name="down-arm-left" d="M192.2,440.81s-78.92,68.54-48.4,176.94" fill="none" stroke="#d04f6c" stroke-linecap="round" stroke-linejoin="round" stroke-width="7.74" />
<g id="left-hand">
<path d="M155.44,626.88a2.82,2.82,0,0,1-.31,4h0a2.82,2.82,0,0,1-4-.31l-5.7-6.65a2.81,2.81,0,0,1,.31-4h0a2.8,2.8,0,0,1,4,.3Z" fill="#e09d9f" />
<path d="M152.33,634.89a4.83,4.83,0,0,1-3.68,5.77h0a4.83,4.83,0,0,1-5.77-3.67l-3.26-14.7a4.84,4.84,0,0,1,3.68-5.77h0a4.84,4.84,0,0,1,5.77,3.68Z" fill="#f3d9c8" />
<path d="M150.71,614a6.17,6.17,0,0,1-3.77,7.86l-3,1a6.17,6.17,0,0,1-7.86-3.77h0a6.15,6.15,0,0,1,3.76-7.86l3-1a6.16,6.16,0,0,1,7.86,3.77Z" fill="#fff" />
</g>
</g>
</g>
<g id="head">
<g>
<path d="M202.71,376.23a9.8,9.8,0,1,1-9.79-9.8A9.79,9.79,0,0,1,202.71,376.23Z" fill="#fff" />
<path d="M194.64,386a9.8,9.8,0,1,1-9.79-9.79A9.79,9.79,0,0,1,194.64,386Z" fill="#fff" />
<path d="M194.64,401.3A14.7,14.7,0,1,1,180,386.6,14.69,14.69,0,0,1,194.64,401.3Z" fill="#fff" />
</g>
<g>
<path d="M235.27,375.65a9.8,9.8,0,1,0,9.8-9.8A9.8,9.8,0,0,0,235.27,375.65Z" fill="#fff" />
<path d="M243.34,385.45a9.8,9.8,0,1,0,9.8-9.8A9.79,9.79,0,0,0,243.34,385.45Z" fill="#fff" />
<path d="M243.34,400.72A14.7,14.7,0,1,0,258,386,14.7,14.7,0,0,0,243.34,400.72Z" fill="#fff" />
</g>
<path d="M254.39,396.05a34.52,34.52,0,1,1-34.52-34.52A34.52,34.52,0,0,1,254.39,396.05Z" fill="#f3d9c8" />
<path d="M259.29,397.78a6,6,0,1,1-6-6A6,6,0,0,1,259.29,397.78Z" fill="#f3d9c8" />
<path d="M191.86,397.78a6,6,0,1,1-6-6A6,6,0,0,1,191.86,397.78Z" fill="#f3d9c8" />
<path d="M248.2,411c0,2.75-3.66,5-8.17,5s-8.17-2.22-8.17-5,3.66-5,8.17-5S248.2,408.28,248.2,411Z" fill="#e09d9f" opacity="0.5" />
<g id="hat">
<path d="M192.09,361.43s7.32-47.09,61.49-44.9c-10.74,6.1-5.13,43.92-5.13,43.92Z" fill="#d04f6c" />
<path d="M255.79,365.7a7.2,7.2,0,0,1-7.19,7.2h-59a7.2,7.2,0,0,1-7.2-7.2h0a7.2,7.2,0,0,1,7.2-7.2h59a7.19,7.19,0,0,1,7.19,7.2Z" fill="#fff" />
<path d="M262.41,314.14a9.57,9.57,0,1,1-9.57-9.56A9.57,9.57,0,0,1,262.41,314.14Z" fill="#fff" />
</g>
<path d="M208.94,410c0,2.74-3.66,5-8.18,5s-8.17-2.23-8.17-5,3.66-5,8.17-5S208.94,407.2,208.94,410Z" fill="#e09d9f" opacity="0.5" />
<path id="beard" d="M186.75,390.28s.48,9.67-2.46,16.69-8.53,21.12,2.13,27.87c6.37,3.49,10.05,1.18,10.05,1.18a10,10,0,0,0,7.81,10.72c6.27,1,8.73-2.29,8.73-2.29s-1.1,7.51,9.81,8c8.76.41,8.66-9.49,8.66-9.49s4,3.32,8.51,1.49c7.51-3.06,3.92-10.78,3.92-10.78s6.13,3.17,10.75-2.34c7.64-9.14-.19-15.64-1.6-27.62s-1.41-11.45-1.41-11.45l-1.8-.6s1.87,14.34-4.76,18.13-12.73,2.93-16.92-4.66c-4.95-9-12.16-7.41-17.64.36S199,411,196.37,409.89c-7.38-3.19-7.17-14-7.63-17.27S188.27,388,186.75,390.28Z" fill="#fff" />
<path d="M191,390.09s5.91-9.24,9.63-10.2,2.12,1.57,2.12,1.57,3.46-2.62,4.82.34c.32,1.67-1.56,2.47-1.56,2.47s2.15,0,.74,2.57S196,387,191,390.09Z" fill="#fff" />
<path d="M245.09,390s-6.28-9-10-9.79-2.06,1.65-2.06,1.65-3.56-2.48-4.8.54c-.25,1.68,1.66,2.4,1.66,2.4s-2.15.08-.64,2.6S239.87,387.13,245.09,390Z" fill="#fff" />
<g id="eyes">
<path d="M206,399.77a2.85,2.85,0,1,1-1.84-3.48A2.78,2.78,0,0,1,206,399.77Z" fill="#1a1b1b" />
<path d="M237.17,400.14a2.85,2.85,0,1,1-1.84-3.48A2.78,2.78,0,0,1,237.17,400.14Z" fill="#1a1b1b" />
</g>
<g id="squint" op.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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