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