gsap 圣诞快乐 2020滑雪动画效果代码-html代码-BFW代码库

gsap 圣诞快乐 2020滑雪动画效果代码

代码语言：html

所属分类：动画

代码描述：gsap 圣诞快乐 2020滑雪动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


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

<head>

  <meta charset="UTF-8">
  

  
  
  
  
<style>
body {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #f2adab;
}

.box {
  position: fixed;
  left: calc(50vw - 50vmin);
  top: calc(50vh - 37.5vmin);
  width: 100vmin;
  height: 75vmin;
}

svg {
  overflow: visible;
}

#snow {
  pointer-events: none;
}

.snow-clone {
  opacity: 0;
}
</style>



</head>

<body >
  <div class="box">
  <svg viewBox="0 0 800 596.74">
    <g id="merry">
      <path fill="#f2adab" d="M0 0h800v596.74H0z" />
      <path style="mix-blend-mode: multiply" id="shadow" fill="#eaeaea" d="M575.92 325.27L418 234.08l2.67-41.29-43.79 17.55-37.22-21.49a22.2 22.2 0 00-22.24 0L206.34 253c-13.39 2.93-29.72 7.25-32 8.17-3 1.24-40.93 33.92-58.91 37.29-12.35 2.31-28.09 18.51-36.75 28.45a21.87 21.87 0 00-6.43 7.78 22.5 22.5 0 00-2.19 11.89 22 22 0 0011 17.25L317.4 500.22a22 22 0 0014.6 2.69l.35.29 69.07-13.71 1.68-25.93 172.82-99.76a22.25 22.25 0 000-38.53z" />
      <g id="box1">
        <path fill="#eaeaea" style="mix-blend-mode: multiply" d="M178.66 204.15l-.8.17c-4-.57-10.11-.87-12.69 1.9a8.76 8.76 0 00-.8 1l-18.18 3.93-4.64 14.11-.64.32c-3.33 1.8-3 5.4-2.15 8.16l-.34 1L133 251.4l9.33 6.19 3.67-.8 1.28.85 30 19.87 19.21-4.15 9.66-2.09 22.85-4.94 5.45-16.64 2.29-7 4.51-13.78-30-19.87-1.24-.82.95-2.87-9.33-6.18z" />
        <path fill="#d36666" d="M280.62 236.01l-51.31-22.16V154.6l51.31 29.63v51.78z" />
        <path fill="#af5555" d="M177.99 236.03l51.31-22.16v-59.25l-51.31 29.62v51.79z" />
        <path fill="#db6a6a" d="M229.31 213.86v51.8l-22.69-13.1-9.59-5.53-19.04-11v-51.8l19.04 11 9.59 5.53 22.68 13.09.01.01z" />
        <path fill="#e87979" d="M280.62 184.23v51.79l-51.31 29.63v-51.79l51.31-29.63z" />
        <path fill="#e6e6e6" d="M280.62 181.38v9.69l-51.31 29.62v-9.68l51.31-29.63zM229.3 211v9.69l-51.31-29.62v-9.69L229.3 211z" style="mix-blend-mode: multiply" />
        <path fill="#ed8d8d" d="M229.3 218.76l-54.95-31.7v-14.03l22.81-13.13 9.59-5.52 22.86-13.18 22.61 13.05 9.58 5.53 22.76 13.17v13.99l-55.26 31.82z" />
        <path fill="#ed8e8e" d="M284.56 172.95l-22.87 13.15-9.57 5.53-22.82 13.15-28.54-16.49-6.19-3.57-20.22-11.69 22.81-13.13 9.59-5.52 22.86-13.18 22.61 13.05 9.58 5.53 22.76 13.17z" />
        <path fill="#e87979" d="M229.31 218.76l55.25-31.82v-13.99l-55.25 31.82v13.99z" />
        <path fill="#db6a6a" d="M174.35 173.06l54.95 31.71v13.99l-54.95-31.7v-14z" />
        <path fill="#ffcb8e" d="M261.8 159.81l-55.18 31.86-9.59-5.53 55.19-31.86 9.58 5.53z" />
        <path fill="#ffcb8e" d="M261.72 186.14l-9.57 5.53-.03-.01-54.96-31.73 9.59-5.52 54.94 31.72.03.01z" />
        <path fill="#ffcb8e" d="M261.72 246.95V186.13l-9.57 5.53V252.47.........完整代码请登录后点击上方下载按钮下载查看