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