svg+css实现水晶球中下雪动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：svg+css实现水晶球中下雪动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>

  <meta charset="UTF-8">
  

  
  
  
  
<style>
:root {
  background-color: #d8ddeb;
}

#shimmer {
  -webkit-animation: shine 3s infinite;
  animation: shine 3s infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}

#presents:hover {
  filter: grayscale(1);
}

@-webkit-keyframes shine {
  from {
    fill: white;
  }
  to {
    fill: #daf0ff;
  }
}

@keyframes shine {
  from {
    fill: white;
  }
  to {
    fill: #daf0ff;
  }
}

#snowglobe-container {
  width: 400px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* #ball-23,
#ball-3,
#ball-5 {
  fill: aqua !important;
}
 */

#snow path:nth-child(odd),
#extra-top-snow path:nth-child(even),
#extra-bottom-snow path:nth-child(odd) {
  /* animation-name animation-duration animation-iteration-count*/
  -webkit-animation: snowfall 3s infinite;
  animation: snowfall 3s infinite;
}

#snow path:nth-child(even),
#extra-top-snow path:nth-child(odd),
#extra-bottom-snow path:nth-child(even) {
  -webkit-animation: snowfall 4s infinite;
  animation: snowfall 4s infinite;
}

@-webkit-keyframes snowfall {
  0% {
    -webkit-transform: translateY(-120px);
    transform: translateY(-120px);
  }

  50% {
    opacity: 60%;
  }

  100% {
    -webkit-transform: translateY(20px) scale(1.1);
    transform: translateY(20px) scale(1.1);
    opacity: 85%;
  }
}

@keyframes snowfall {
  0% {
    -webkit-transform: translateY(-120px);
    transform: translatY(-120px);
  }

  50% {
    opacity: 60%;
  }

  100% {
    -webkit-transform: translateY(20px) scale(1.1);
    transform: translateY(20px) scale(1.1);
    opacity: 85%;
  }
}

/* turn off the animation for users who have reduce motion turned on*/
@media (prefers-reduced-motion: reduce) {
  * {
    -webkit-animation-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    -webkit-animation-iteration-count: 1 !important;
    animation-iteration-count: 1 !important;
    -webkit-transition-duration: 0.01ms !important;
    -o-transition-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
</style>

  <script>
  window.console = window.console || function(t) {};
</script>

  
  
  <script>
  if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
  }
</script>


</head>

<body>
  <svg viewBox="0 0 618 754" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" id="snowglobe-container">
  <g id="snowglobe">
    <g id="background">
      <path d="M104.85 536.19a15.506 15.506 0 0 1-3.87-2.72c-2.42-2.86-4.63-5.9-6.9-8.89-3-3.94-6.09-7.84-9-11.88-1.7-2.38-3-5-4.61-7.48-1.27-2-2.81-3.82-4-5.88a539.839 539.839 0 0 1-8.49-16c-2.83-5.55-5.55-11.15-8.24-16.77-.71-1.49-1-3.16-1.67-4.68a166.605 166.605 0 0 1-7.57-21.27c-1.33-4.74-3.29-9.41-3.19-14.5.021-.24-.02-.481-.12-.7-2.45-4.49-2.67-9.56-3.52-14.43-.85-4.87-2.1-10-2.09-15.12 0-3.16-.78-6.31-.92-9.48-.25-5.5-.8-11-.48-16.51.15-2.7 0-5.41.06-8.12.2-6.4.35-12.81.77-19.2.23-3.53.94-7 1.48-10.54.65-4.21 1.23-8.43 2-12.61a156.2 156.2 0 0 1 5.36-21.74c1.34-3.92 2.44-7.93 3.8-11.85 1.61-4.66 3.46-9.24 5.05-13.9a71.783 71.783 0 0 1 6.37-14.1c1.45-2.39 2.32-5.13 3.57-7.64 1-2.1 2.26-4.11 3.42-6.15.17-.31.56-.52.66-.84 1.63-5.34 5.24-9.54 8.28-14 2.84-4.22 5.92-8.3 9-12.33 2.47-3.18 5.25-6.12 7.73-9.3 1.2-1.54 1.86-3.5 3-5.06a144.13 144.13 0 0 1 16.7-17.87c4.16-3.89 8.08-8 12.33-11.81 3.45-3.06 7.17-5.84 10.89-8.57 5.427-4 10.927-7.88 16.5-11.64 2.53-1.72 5.3-3.06 8-4.58 2.25-1.29 4.41-2.8 6.76-3.86 5-2.27 9.21-6 14.71-7.55 4.23-1.19 8-3.84 12.16-5.56 4.68-2 9.43-3.84 14.26-5.38 7-2.22 14-4.21 21.12-6.09 5.46-1.45 10.95-2.88 16.52-3.79 6.76-1.11 13.62-1.67 20.43-2.46 3.76-.43 7.51-.95 11.28-1.24 2.69-.21 5.4-.13 8.1-.15 2.7-.02 5.41 0 8.12 0a144.86 144.86 0 0 1 24.77 2c4.32.64 8.8.6 13 1.66 6.06 1.53 12.29 2 18.38 3.56 8 2 15.81 4.63 23.78 6.7 3.41.89 6.62 2.58 9.91 3.92 2.83 1.16 5.62 2.44 8.49 3.48 3.35 1.21 6.73 2.23 9.6 4.48.916.548 1.892.988 2.91 1.31 9.39 4.26 18 9.93 26.7 15.36 3.47 2.16 6.88 4.45 10.17 6.88 3.61 2.67 7.11 5.52 10.56 8.41 4.54 3.8 9 7.65 13.43 11.61 2.35 2.12 4.44 4.53 6.64 6.81 3 3.11 6.2 6.1 9 9.37 3.31 3.83 6.34 7.89 9.47 11.87 2.27 2.88 4.58 5.73 6.73 8.69 3.26 4.5 6.53 8.95 9.39 13.77 3.9 6.58 7.93 13.09 11.51 19.85 1.71 3.22 2.57 6.91 4.46 10 2.69 4.39 4.15 9.23 6 13.92 1.15 2.85 2.16 5.75 3.22 8.63 2.83 7.66 4.61 15.63 6.89 23.46 1.49 5.12 1.7 10.53 3.14 15.59 1.77 6.22 1.79 12.59 2.84 18.85.301 1.853.478 3.724.53 5.6.28 8.67.92 17.34.6 26-.28 7.54-.46 15.13-1.81 22.64-1.32 7.32-2 14.76-3.1 22.14a64.96 64.96 0 0 1-1.71 7.51 1227.548 1227.548 0 0 1-5.29 18.8c-.92 3.17-2 6.29-3 9.41-.6 1.77-1.55 3.39-.92 5.48.21.71-.63 1.94-1.28 2.67a17.166 17.166 0 0 0-4.13 9.56c-.25 1.86-.56 3.5-2.51 4.36a2.78 2.78 0 0 0-1.11 1.27c-3.64 6.64-7.24 13.31-10.88 20.25-.93.92-1.86 1.53-3.26.78a1.764 1.764 0 0 1-.33-2.16c2.21-3.51 1.58-6.87-.38-10.21a4.284 4.284 0 0 1-.37-2 10.32 10.32 0 0 1 1.54-4.59c3.93-7.32 7.17-15 10.41-22.61 1.84-4.34 2.76-9 4.51-13.76a47.734 47.734 0 0 0 3.78-14.71c1.73-2.23 1.57-4.68 2.07-7 1-4.76 1.92-9.54 2.73-14.35 4.35-25.78 4.1-51.5.29-77.37a241.756 241.756 0 0 0-15.1-54.51 239 239 0 0 0-30.03-53.25c-9.37-12.72-20.18-24-31.41-34.93a34.748 34.748 0 0 0-5.48-4.41c-3.58-3.48-5.67-8.26-11.15-9.53-9-5.68-17.24-11.91-26.25-17a295.216 295.216 0 0 0-33.51-15.85 216.133 216.133 0 0 0-40-11.93c-11.41-2.29-23.1-3-34.73-4-11.63-1-23.27.3-34.9.51-5.47.1-10.85 1.39-16.27 2.11-19.84 2.62-38.71 8.83-57.14 16.3a220.538 220.538 0 0 0-53.63 31.5c-13.25 10.42-24.9 22.4-36.56 34.5-5.59 5.79-10.21 12.16-15 18.83-1.23 2.35-3.82 3.41-4.31 6.26-1.28 4.43-3.9 7.89-6.05 11.58a240.879 240.879 0 0 0-31.15 93.1 235.015 235.015 0 0 0 .53 59.36 246.195 246.195 0 0 0 13.87 55.61 251.22 251.22 0 0 0 23 45.42 154.524 154.524 0 0 0 14.33 19.93c1.67 4.23 3.82 7.92 5.75 12a9.334 9.334 0 0 1-5.94 4.75Z" style="fill:#edf7fc;fill-rule:nonzero" />
      <path d="M453.67 181.44a95.747 95.747 0 0 1 8.11 6.11c3.63 3.34 7.06 6.91 10.41 10.53 4.09 4.43 8 9 12 13.54 1 1.15 2.19 2.18 3.14 3.39 1.08 1.39 1.94 2.94 3 4.37 1.06 1.43 2.1 2.51 3 3.84 2.88 4 6 7.94 8.49 12.19 4.22 7.13 8.15 14.42 12 21.76 2.85 5.42 5.47 11 8 16.55a85.624 85.624 0 0 1 2.89 8.39c2.71 8.09 5.74 16.09 8 24.3a206.06 206.06 0 0 1 4 20.56c1 6.3 2 12.64 2.58 19 .59 6.58.8 13.2.94 19.81.227 5.8.153 11.608-.22 17.4-.65 7.78-1.73 15.52-2.89 23.24-1 6.32-2.25 12.58-3.48 18.85a9.61 9.61 0 0 1-1.43 3c-1.88-.84-1.37-2.38-1.27-3.74.63-8.64 1.45-17.34 1.2-26-.28-9.63.08-19.27-.48-28.87-.57-9.83-.73-19.69-2-29.49-.68-5.17-2.76-9.82-4.8-14.48-.9-2.07-3-3-4.9-4-10.06-5.15-21-7.53-31.87-10.07a218.081 218.081 0 0 0-47.63-5.48c-2.54-2.36-.09-3.56 1-4.67a47.065 47.065 0 0 0 10.64-15 13.301 13.301 0 0 0 1.19-5.18 8.104 8.104 0 0 0-6.1-8.19 19.714 19.714 0 0 0-9.53-.38c-14.19 2.88-26 10.19-36.64 19.65a68.305 68.305 0 0 0-11 12.13c-2.55 3.7-3.88 3.68-6.86.34a88.528 88.528 0 0 0-38.31-25.59 38.955 38.955 0 0 0-15.48-1.84c-7.6.56-11.93 6.58-10.09 13.95 1.6 6.41 5.2 11.67 9.67 16.41 1.27 1.36 2.87 2.52 3 4.44a2.164 2.164 0 0 1-1.88 1.31c-7.19 0-12.09 4.49-17.1 8.65-3.75 3.12-7.55 6.14-11.51 9-4.83 3.48-8.35 8.39-12.78 12.36-2.31 2.08-3.13 5.26-3.58 8.39-.71 4.95-1.27 9.91-1.94 14.85-.33 2.5.78 4.66 1.07 7.27-.54 1.53-1.76 1.81-2.84 2.27-15.13 6.36-27.85 15.77-37.39 29.28-2.18 3.09-3.51 3.3-5.84.41-8.08-10-18.91-16.55-29.33-23.61a19.155 19.155 0 0 0-6.59-2.63c-4.29-1-8.65-1.64-13-2.24a19.18 19.18 0 0 0-8.1.8c-6.58 1.92-9.34 6.7-7.59 13.4 2.28 8.78 7.89 15.36 14.43 21.23 4.94 4.43 9.7 9.16 15.92 11.92a2.893 2.893 0 0 1 1.56 1.8c-1.53 2.17-4 2.11-6.26 2.09a55.479 55.479 0 0 0-21.18 4.3c-11.35 4.58-17 13.4-18.46 25.07-1.27 10-2 20.09-2.42 30.19-.43 9.63-.93 19.23-.15 28.85a3.16 3.16 0 0 1-.47 1.61c-2.07 1.39-3-.11-3.91-1.28-5.7-7-7.88-7.67-16.54-4.65a7.244 7.244 0 0 1-6.75-.61c-7.64-4.77-10.37-4.51-17.35 1.38a5.762 5.762 0 0 1-2.68 1.46c-1.48-.12-2.46-.87-3.63-1.16-5-1.23-4.88-1.25-5.08-6.33-.75-18.75 3.55-36.57 9.69-54.1 5.5-15.74 11.17-31.41 18.67-46.31a389.148 389.148 0 0 1 54.12-79.87c7.71-8.89 15.47-17.8 23.88-26 18.55-18.11 37.74-35.44 58.75-50.84 24.44-17.91 51.06-31.76 77.88-45.42a70.247 70.247 0 0 1 8.21-3.29 8.45 8.45 0 0 1 3.43-.23c5.529.62 11.111.62 16.64 0 16.42-1.69 32.35-5.15 47.28-12.44a21.393 21.393 0 0 1 8.54-2.36c5.11-.17 9.62-2.46 14.35-3.94.58-.18.91-.75 1.57-1.35 3.4-.92 6.61-2.41 10.08 0Z" style="fill:#94afcc;fill-rule:nonzero" />
      <path d="M351.68 202.15c-2.65 1.57-5.37 2.72-8 4.1-14.29 7.56-28.46 15.34-42.83 22.74-14.12 7.28-26.67 16.86-39.34 26.27-6.85 5.09-13.61 10.3-20.35 15.54-2.34 1.82-4.54 3.82-6.71 5.84-4.61 4.29-9.14 8.66-13.73 13-3.45 3.26-7.07 6.35-10.37 9.76-4.79 4.94-9.35 10.1-14 15.18-2.8 3.06-5.48 6.25-8.39 9.2a224.304 224.304 0 0 0-20 24.07c-4.45 6-9.18 11.82-13.33 18-5.46 8.2-10.58 16.63-15.65 25.09a157.961 157.961 0 0 0-8.5 15.65c-4.81 10.6-9.45 21.28-13.73 32.1-3.22 8.17-5.88 16.56-8.6 24.92a115.473 115.473 0 0 0-5.75 27.44c-.46 6.38-.5 12.79-.7 19.2.032.609.112 1.214.24 1.81 2.13 1.21 5.31-.51 6.82 2.67.43 3.23-1 5.07-4 6-4.84-4.64-8.32-10-11.92-15.33-3.12-4.58-5.73-9.52-8.56-14.3-1.94-3.27-4-6.44-5.78-9.8-2.34-4.51-4.4-9.15-6.58-13.73-1.31-2.76-2.69-5.49-3.89-8.29a70.522 70.522 0 0 1-2.67-7.28c-2.84-9.28-6-18.51-8.26-27.92-1.89-7.69-2.83-15.61-4.11-23.43a154.659 154.659 0 0 1-2.14-25.21c0-4-.63-8-.5-12 .2-6 .92-12 1.25-18.08.55-9.94 2.65-19.66 4.41-29.41 1-5.68 2.89-11.22 4.46-16.8 1-3.5 2-7 3.26-10.43 2.3-6.36 4.38-12.84 7.24-18.95 4.13-8.79 8.86-17.3 13.38-25.91 1.65-3.15 3.42-6.23 5.18-9.59.89-1.09 1.95-1 3-1.09 15.44-1 30.63-2.61 44.9-9.72 11.35-5.66 23-11 35.12-14.82a108.89 108.89 0 0 1 43.63-5.17 298.12 298.12 0 0 1 30.33 4.4c5.54 1.1 11.13.51 16.69-.19 10.12-1.29 20.43-1 30.41-3.61 7-1.79 13.92-4.06 21.13-5.13 11-1.64 22-1.92 32.93.78 1.56.41 3.18.58 4.01 2.43Z" style="fill:#aec5da;fill-rule:nonzero" />
      <path d="M96.18 228.52c3.25-6 6.47-11.86 11.38-16.31 2.63-2.38 4.91-5 7.41-7.5 4.8-4.75 9.21-9.9 14.07-14.58 4.33-4.17 9-8 13.61-11.87 3.9-3.27 7.9-6.42 12-9.49 3.393-2.56 6.86-5.013 10.4-7.36 3.51-2.32 7-4.88 10.77-6.55 6.07-2.65 11.31-6.86 17.77-8.81 4.37-1.32 8.4-3.75 12.68-5.42a339.946 339.946 0 0 1 16.64-5.95c6.06-2 12.13-4 18.32-5.45 4.31-1 8.59-2.25 13.13-2.49a102.699 102.699 0 0 0 14-2.09c5.94-1.15 11.93-1.18 17.93-1.37 5-.16 10-.83 14.91-.61 7.89.35 15.76 1.22 23.64 1.94 4.57.42 9.15.82 13.7 1.5 4.55.68 8.8 1.61 13.18 2.52 2.55.53 5.07 1.23 7.59 1.86a203.688 203.688 0 0 1 23.6 7.65c5 1.9 9.9 3.81 14.8 5.85a84.247 84.247 0 0 1 7.9 3.81c4.77 2.58 9.79 4.67 14.32 7.71 4.12 2.75 8.39 5.27 12.54 8 4.32 2.81 8.57 5.72 12.9 8.82 1.15 2.42 7.27 7 6 7.91-4.47 3.23-12.6 2.54-17.88 3.43-5.89 1-15.66 1.55-22.1 3.74-12.21 6.05-25.47 6.88-38.19 9.79a8.7 8.7 0 0 1-3.12 0c-7.18.61-13.79-.92-20.33-2.69-9.15-2.47-18.32-2.06-27.6-1.06a106.926 106.926 0 0 0-23 4.81c-9.49 3.2-19.5 2.72-29.23 4.25-11.75 1.85-23.18-.11-34.7-1.94-14.94-2.38-30-3.61-45.08-1.72-6.54.81-12.72 3-18.78 5.45-13.15 5.2-26.42 10.14-38.83 17a47.867 47.867 0 0 1-13.68 4.92c-5.25 1.07-10.46 2.21-15.58 3.79-2.53.77-4.99 1.03-7.09-1.49Z" style="fill:#e1e6f1;fill-rule:nonzero" />
      <path d="M93.6 228.38c2.89 1.31 5.48 1 8.35.09 4.5-1.41 9.17-2.24 13.78-3.31a63.143 63.143 0 0 0 17.46-6.8.........完整代码请登录后点击上方下载按钮下载查看