gsap+svg实现窗外圣诞老人月色下雪动画代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：gsap+svg实现窗外圣诞老人月色下雪动画代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
<style>
*{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
body{
  background-color: #af1407;
  background-image: url("data:image/svg+xml,%3Csvg width='42' height='44' viewBox='0 0 42 44' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Page-1' fill='none' fill-rule='evenodd'%3E%3Cg id='brick-wall' fill='%23eb8469' fill-opacity='0.73'%3E%3Cpath d='M0 0h42v44H0V0zm1 1h40v20H1V1zM0 23h20v20H0V23zm22 0h20v20H22V23z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
  
.container {
  display: flex;
  justify-content: center;
  margin: 20px auto;
}
  
.snowball{
  position: relative;
  max-width: 100%;
  display: flex;
  justify-content: center;
  filter: drop-shadow(0 0 10px #540903); 
}
  
canvas{
  background-color: #0A3D62;
  border: 35px solid #af1407;
  border-radius: 50%;
}
  
.moon{
  position: absolute;
  width:180px;
  height:180px;
  background-color: #E8D7C1;
  box-shadow: 0 0 15px 10px rgba(232, 215, 193, 0.4);
  border-radius: 50%;
  margin: 70px;
}
  
.deers{
  position: absolute;
  top: 160px;
  left: 50px;
}
</style>



</head>

<body >
  <div class="container">
  <div class="snowball">
    <canvas id="snow" width="500" height="500"></canvas>
    <div div class="moon"></div>
    <svg class="deers" width="250" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" clip-rule="evenodd" viewBox="0 0 300 100">
      <g fill="#051424" fill-rule="nonzero">
      <path d="M71.6 70.81a7.48 7.48 0 0 1-2.75 1.76c-1.96.83-5.46 1.13-8.13.57-1.6-.33-4.02-1.21-5.12-2.32a17.4 17.4 0 0 1-3.87 1.84l-.24.09c.18 1.17.68 2.4 1.46 3.26a7.04 7.04 0 0 0 4.76 1.96c1.71-.07 2.29-.65 2.19-1.05-.13-.52-.57-.68-1.1-.6-.52.09-.58-.3.02-.45.73-.19 1.26-.05 1.66.39.47.5.52 1.45-.14 1.9 3.76-.75 6.97-1.66 8.91-3.63a8.59 8.59 0 0 0 2.34-3.72ZM34.7 83.38c-.47-.24-.82-.68-.89-1.09-.08-.54.18-.94.87-1.22.56-.22.85.08.4.32-.46.24-.63.6-.28 1.05.27.34 1.18.43 2.47-.48a4.68 4.68 0 0 0 1.75-4.1c-.08-.5-.27-1-.54-1.5-2.9.56-5.48.88-7.76.99-.61.03-1.19.04-1.74.04.43 1.44.54 3.23-.9 4.88a9.8 9.8 0 0 1-6.05 3.46c-.8.17-1.66.16-2.42 0 1.64 1.08 3.38 1.14 6.16.28 1.89-.59 5.38-1.64 8.92-2.63Zm5.68-7.43c.22.76.34 1.55.32 2.17a6.17 6.17 0 0 1-1.8 4.06l-.13.11 1.56-.39c4.22-1 10.82-2.12 15.6-2.95a9.75 9.75 0 0 1-3.97-1.8c-1.08-.86-2.34-2.53-2.62-3.69a97.56 97.56 0 0 1-8.96 2.5Zm33.61-8.66c1.32 3.64-.6 7.74-4.1 9.97-2.77 1.78-7.02 2.8-11.19 3.34l-32.12 7.24c-3.98 1.39-7.21.65-9.04-1.55-2.06-2.5-1.87-4.76-.08-6.67.72-.76 1.41-.17 1.08.32a4.18 4.18 0 0 0-.57 3.93c.52.85 1.9 1.13 3.5.9 1.73-.25 4.44-2.01 5.16-3.26.72-1.24.8-3-1.44-4.4l-.1-.06a15.04 15.04 0 0 1-7.68-3.77c-1.58-1.38-2.6-2.51-4.1-5.55-.53-1.09-1.5-1.56-3.14-1.45-1.14.08-1.6-.86-.4-1.28 1.2-.42 2-.6 3.13-.74-2.6-1.53-2.88-4.21-2.64-6.07.02-.19-.13-.38-.4-.5l-.19.52-.01.29c-.2 3.07-1.94 5.44-3.58 7.15-1.64 1.7-3.5 2.6-4.95 3.57-.72-.32-.17-1.4-.31-1.8a28.34 28.34 0 0 0 5.74-3.75 6.77 6.77 0 0 0 1.87-3.25 14.03 14.03 0 0 1-3 2.82C3.7 64.49 1.94 65.03.5 65.66c-.55-.36.13-1.22.08-1.57a27.14 27.14 0 0 0 5.66-2.49c1.59-.96 2.4-2.83 2.97-4.07-.82-.04-1.98.38-2.95 1.83-1.11 1.66-3.52 1.73-4.22 2.1a4.15 4.15 0 0 1 .3-2.4c.35-.9-1.35-1.36-1.3-2.6.06-1.25 1-1.44 2.37-1.84 1.37-.4.43-1.12.44-1.8 0-1.16 2.68-1.3 2.68-1.3.42 1.6 1.01 3.89 2.77 4.16 2.16.32 4.64-2.88 10-2.08 2.87.43 4.22 3.18 5.03 5.39-.64-1.77-1.47-3.94-1.06-4.55-1.2-.54-2.14-2.06-1.67-2.76-2.01.58-2.39-1.21-1.95-1.86-2.57-.3-3.2-3.05-4.88-2.79-1.42.23-3.02 1.03-4.5.96-.18.38-.57.69-1.08.8-.88.22-1.8-.19-2.06-.9-.26-.72.24-1.47 1.12-1.68.88-.21 1.8.2 2.07.91l.03.12c1.8-.19 3.54-1.16 4.85-1.82 1.57-.78 4.67-1.95 6.23-1.84 1.55.1 2.87.05 4.06 1.28 2.07-1 2.85.3 2.13 1.36.75.64.97 1.25.95 1.67 1.28.03 1.69.21 1.9.57.22.36-.1.44-.46.6-.37.15-.69.43 0 .68.68.25 1.27.4 2.15.75.88.33 2 2.2-.78 3.1 1.6.24 4.2-.11 5.4-.27.58-.96 2.27-3 3-3.32-.25-1.07.63-2.69 2.21-2.04.9-.96 2.47-1.42 3.2-.83.51.43.93 1.41.24 2.54a7.58 7.58 0 0 1-2.8 2.53c.32.89-.24 1.43-1.15 2.2-.9.76-1.83 1.47-2.74 1.96-.92.5-2.22.87-3.55.71a24.3 24.3 0 0 0 5.15 1.17c1.38.08 2.87 0 3.37.9 1.32.06 1.94 1.18.86 2.04.42.45 1.87 1.07 3.3.73 2-.48 2.29-1.97 2.56-4.03.27-2.05 2.03-5.16 4.28-6.38 2.26-1.23 5.86-2.26 7.97-1.8 2.1.45 3.75 2.73 2.84 4.25-.3.51-.94.61-1.1-.1-.18-.71-.74-1.54-2.13-1.41-1.38.12-3.16.82-3.69 2.39-.52 1.57.54 4.74.72 7.1.12 1.61.67 4.6-1.85 7.32.84 1.07 2.27 1.73 3.57 2.25 1.8.72 4.7.63 6.83.06 1.98-.53 3.59-1.41 3.93-3.1a9 9 0 0 0-.08-.71c-.36-2.4-2.13-4.32-3.76-4.63-1.64-.31-3.2.02-3.59.6.6.11.86.6.48 1.02-.35.38-1.2.43-1.7-.06-.5-.47-.46-1.25.56-1.95a7.28 7.28 0 0 1 4.75-.9c1.82.28 4.2 1.8 5.53 5.46ZM142.7 34.44a43.2 43.2 0 0 1 4.66.04c.84.05 1.94-.19 2.64-.22.7-.03 1.15.74.66 1.47-.5.74-1.25.83-2.3 1-1.05.19-1.58.77-2.61 1.37-1.04.59-2.31.9-3.2.9-.9.02-1.09.35-1.54 1.34-.45.98-1.6 2-2.07 3.2-.48 1.2-.61 4.58-1.11 5.65 1.35-.6 2.85-1.41 3.76-1.68.9-.27 1.26-.05 1.4 1.07.81-.46 1.5-.55 1.83.19.32.73 1.33 3.71 1.86 4.53.54.81 1.02 2.05.04 2.58-.98.54-1.65.72-1.9 1.38.29.89-.39 1.39-.8 1.85a8.41 8.41 0 0 1-.9-1.7c.5-.73.61-.8 1.08-1.06.46-.27 1.27-.68 1.3-1.15.05-.47 0-1.19-.3-2.03-.26-.71-.94-1.71-1.24-2.17-.32-.5-.44-.67-.94-.61.04.92.38 2.94.54 3.44.16.5-.06.86-.68 1.25-.63.39-1.16.64-1.62 1.22-.47.57-1.22.97-1.74.94-.51-.04-.6-.64-.4-1.18.23-.55.36-.86 1.17-.86.8-.15 1.48-.57 1.74-.91.25-.34.17-1.17.06-1.62a6.82 6.82 0 0 0-.5-1.52c-.96.64-2.6 1.84-3.19 2.43-.59.59-1.63 1.2-2.15.8-.52-.4-1.07-1.32-1.96-.64-.9.68-2.23 1.73-3.9 2.7a14.34 14.34 0 0 1-5.91 1.72c-1.65.05-2.71.13-4.6.31a6.16 6.16 0 0 0-3.85 1.51c-.98.85-1.51 2.1-3.03 2.86-1.51.76-3.58 1.63-4.32 2.45a7.02 7.02 0 0 0-1.7 3.16c-.13 1-.39 2.32-1.3 2.95a22 22 0 0 1-2.33 1.43c-.32.71-1.1 1.59-1.59 1.75-.48.16-.58-.08-.73-.53-.17-.5-.23-.86-.06-1.34.16-.49.44-.52.94-.56.54-.05.74.04 1.17-.42a9.48 9.48 0 0 1 1.6-1.4c.56-.38.53-.84.58-1.57.06-.73.6-3.02.6-3.74-.01-.73-.18-1.17 1-1.63a10.96 10.96 0 0 0 3.46-1.98c-1.45.4-3.2.96-3.88 1.1-.67.13-1.23.86-1.65 1.69-.41.82-.95 2.5-1.71 3.52-.77 1.03-1.71 2.2-2.52 2.6-.32 1.12-.9 1.67-1.88 1.96-.62.18-.83-.28-.92-.8-.08-.51-.08-1.06.63-1.36.7-.3 1.4-.26 1.6-.6.18-.31 1.54-1.28 1.78-2.03.24-.76 1.27-2.5 1.34-3.43.11-1.45.38-2.12.67-2.73.24-.52.68-.54 1.87-.69.63-.07 1.9-.44 2.12-1.24.24-.8-.21-2.87.45-4.1-1.1.76-2.17.86-3.13.74a2.38 2.38 0 0 1-1.75-.96 8.17 8.17 0 0 0 2.96-.52c.76-.35 1.57-1.3 3.66-2.03 2.1-.72 4.37-1.3 6.47-2.02a57.5 57.5 0 0 0 7.98-3.62c2.58-1.43 4.1-2.6 5.8-4.36a34.08 34.08 0 0 1 5.76-4.62c1.1-.6 2.15-1.1 2.43-1.34.27-.24.07-.65-.74-.22-1.02.54-2.2.54-2.79.15-.48-.31-.5-.57.08-.66 1-.14 2.39-.2 3.33-.53.79-.28 1.46-.35 2.3-.5.53-.07.48-.72-.4-.66-1.35.08-3.6.15-5.2-.12a12.8 12.8 0 0 1-5.95-2.92 18.94 18.94 0 0 1-4.47-6.1 12.38 12.38 0 0 1-1.18-4.12c0-.63.43-.53.57.09.16.75.51 1.98.77 2.25s.71.08.99-.43a6.05 6.05 0 0 1 2.12-2.06c.8-.33.85.1.36.39a7.4 7.4 0 0 0-2.09 2.66c-.27.74-.17 1.3.08 1.76.26.47.92 1.15 1.27.59a4.46 4.46 0 0 1 2.18-1.71c.72-.25.93.1.29.38-.65.28-1.41.93-1.8 2-.31.8.23 1.52.57 2.28.35.76 1.29 1.37 1.97 1.72.69.36 1.1.37.95-.18a6.2 6.2 0 0 1 .2-2.87c.33-.7 1.58-1.3 2.4-1.46.84-.17.91.22.37.42-.53.2-.87.38-1.23.69-.35.31-.12.72.37.74.62.01 1.1.05 1.71.24.61.19.5.46-.04.43a8.63 8.63 0 0 0-1.93.07c-1.1.18-1.38.91-1.24 1.67.14.75.63 1.39 1.88 2.14 1.25.74 4.47.84 6.92.54 1.1-.14 1.82-.72 2.08-1.27.24-.5.11-1.1-.46-1.52-.43-.32-.19-.53.3-.25.67.4.89.73.97 1.08.1.42.02.61-.08.98-.12.4.17.48.63.17.47-.3 1.46-1.13 1.35-2.07a2.26 2.26 0 0 0-.9-1.56c-.37-.31-.13-.63.4-.26.6.4 1.1 1.04 1.28 1.7.26.93-.24 2.07-1.7 2.77-1.49.7-1.95.7-2.46.87-.49.15-.57.66.26.56ZM239.43 16.74c.92-.19 3.82-.33 4.66-.34.84-.02 1.9-.35 2.59-.44.69-.1 1.24.63.84 1.4-.4.78-1.14.93-2.16 1.2-1.02.27-1.47.89-2.43 1.57a6.85 6.85 0 0 1-3.07 1.17c-.88.08-1.03.43-1.36 1.45-.32 1.02-1.33 2.13-1.66 3.36-.32 1.23-.03 4.6-.4 5.71 1.28-.72 2.67-1.64 3.54-1.98.86-.34 1.25-.16 1.53.94.75-.52 1.42-.67 1.84.04.41.7 1.79 3.59 2.42 4.35.63.77 1.27 1.95.36 2.57-.9.61-1.55.85-1.72 1.52.4.87-.2 1.42-.56 1.92-.3-.31-.9-1.19-1.1-1.62.4-.77.5-.85.93-1.15.43-.3 1.18-.78 1.16-1.25a5.2 5.2 0 0 0-.57-2c-.34-.68-1.14-1.62-1.5-2.05-.38-.47-.52-.63-1.01-.53.16.92.75 2.9.97 3.37.22.49.05.87-.52 1.31-.58.44-1.07.73-1.46 1.34-.39.61-1.09 1.08-1.6 1.08-.52 0-.7-.58-.54-1.14.14-.56.23-.88 1.04-.95a2.9 2.9 0 0 0 1.62-1.05c.2-.36.02-1.17-.14-1.62-.19-.5-.35-.93-.69-1.46-.88.71-2.36 2.04-2.87 2.68-.51.63-1.47 1.33-2.04.97-.57-.35-1.23-1.22-2.04-.47-.8.75-2 1.9-3.52 3.01a13.8 13.8 0 0 1-5.67 2.2c-1.64.19-2.69.35-4.53.69-1.85.33-2.77.9-3.65 1.82-.87.93-1.24 2.22-2.65 3.1-1.42.87-3.36 1.92-4 2.79a6.7 6.7 0 0 0-1.29 3.28c0 1-.1 2.35-.91 3.05-.82.7-1.46 1.15-2.16 1.61-.22.74-.9 1.67-1.35 1.87-.46.2-.59-.02-.8-.46-.24-.48-.33-.83-.23-1.33.1-.5.37-.55.87-.64.53-.09.74-.01 1.1-.51.37-.5.9-1.1 1.42-1.52.52-.43.43-.88.39-1.61-.04-.73.21-3.06.12-3.78-.1-.72-.32-1.14.8-1.7a10.3 10.3 0 0 0 3.18-2.25c-1.39.51-3.06 1.22-3.71 1.41-.66.19-1.12.96-1.43 1.82-.31.85-.64 2.56-1.27 3.65-.63 1.08-1.42 2.32-2.18 2.8-.17 1.12-.68 1.72-1.62 2.1-.59.22-.86-.22-1.01-.73-.15-.5-.22-1.04.45-1.4.67-.35 1.37-.38 1.52-.73.13-.33 1.37-1.4 1.52-2.17.14-.77.94-2.58.9-3.52a6.74 6.74 0 0 1 .32-2.77c.18-.54.6-.6 1.78-.84.61-.13 1.82-.6 1.95-1.41.13-.83-.57-2.84-.07-4.11a4.22 4.22 0 0 1-3.02.99 2.51 2.51 0 0 1-1.86-.81c1-.1 2.16-.35 2.87-.76.72-.42 1.4-1.43 3.4-2.33 1.99-.9 4.18-1.65 6.18-2.54 1.99-.9 5.02-2.59 7.48-4.27a20.87 20.87 0 0 0 5.23-4.82 32.16 32.16 0 0 1 5.15-5.07c1.01-.7 2-1.27 2.24-1.53.24-.26 0-.66-.76-.16-.94.62-2.12.72-2.76.38-.51-.27-.57-.53 0-.66.97-.23 2.35-.4 3.24-.81.75-.34 1.42-.46 2.23-.7.52-.1.38-.74-.49-.61-1.33.19-3.55.45-5.19.31a13.38 13.38 0 0 1-6.27-2.41 20.1 20.1 0 0 1-5.21-5.69c-.73-1.18-1.57-2.98-1.7-4-.08-.64.37-.57.58.04.25.73.76 1.92 1.05 2.17.29.25.72.02.93-.5a5.7 5.7 0 0 1 1.85-2.23c.75-.4.85.03.4.35a6.97 6.97 0 0 0-1.74 2.83c-.18.75 0 1.3.3 1.74.32.45 1.06 1.07 1.34.48a4.2 4.2 0.........完整代码请登录后点击上方下载按钮下载查看