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

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

代码语言：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.........完整代码请登录后点击上方下载按钮下载查看