效果图

1.gif

css

  1. <style>
  2.         /*//漂浮物*/
  3.         @keyframes mysnow {
  4.             0% {
  5.                 bottom: 100%;
  6.                 transform: rotate(0deg);
  7.             }
  8.             100% {
  9.                 transform: rotate(-30deg);
  10.                 bottom: -10%;
  11.             }
  12.         }
  14.         @-webkit-keyframes mysnow {
  15.             0% {
  16.                 bottom: 100%;
  17.                 -webkit-transform: rotate(0deg);
  18.             }
  19.             100% {
  20.                 -webkit-transform: rotate(-30deg);
  21.                 bottom: -10%;
  22.             }
  23.         }
  25.         @-moz-keyframes mysnow {
  26.             0% {
  27.                 bottom: 100%;
  28.                 -moz-transform: rotate(0deg);
  29.             }
  30.             100% {
  31.                 -moz-transform: rotate(-30deg);
  32.                 bottom: -10%;
  33.             }
  34.         }
  36.         @-ms-keyframes mysnow {
  37.             0% {
  38.                 bottom: 100%;
  39.                 -ms-transform: rotate(0deg);
  40.             }
  41.             100% {
  42.                 -ms-transform: rotate(-30deg);
  43.                 bottom: -10%;
  44.             }
  45.         }
  47.         @-o-keyframes mysnow {
  48.             0% {
  49.                 bottom: 100%;
  50.                 -o-transform: rotate(00deg);
  51.             }
  52.             100% {
  53.                 -o-transform: rotate(-30deg);
  54.                 bottom: -10%;
  55.             }
  56.         }
  58.         .roll5 {
  59.             position: absolute;
  60.             animation: mysnow 20s linear;
  61.             -webkit-animation: mysnow 20s  linear;
  62.             -moz-animation: mysnow 20s linear;
  63.             -ms-animation: mysnow 20s linear;
  64.             -o-animation: mysnow 20s linear;
  65.         }
  66.         .roll4 {
  67.             position: absolute;
  68.             animation: mysnow 12s linear;
  69.             -webkit-animation: mysnow 12s linear;
  70.             -moz-animation: mysnow 12s linear;
  71.             -ms-animation: mysnow 12s linear;
  72.             -o-animation: mysnow 12s linear;
  73.         }
  75.         .roll3 {
  76.             position: absolute;
  77.             animation: mysnow 8s ease-out;
  78.             -webkit-animation: mysnow 8s ease-out;
  79.             -moz-animation: mysnow 8s ease-out;
  80.             -ms-animation: mysnow 8s ease-out;
  81.             -o-animation: mysnow 8s ease-out;
  82.         }
  83.         .roll {
  84.             position: fixed;
  85.             z-index: 9999999;
  86.         }
  87.     </style>

js

  1. <script>
  2.     /*漂浮物*/
  3.     function snow(left, top, src) {
  4.         var img = document.createElement("img");
  5.         img.className = "roll roll"+ Math.floor(Math.random() * 3 + 3) + "";
  6.         img.src = src;
  7.         img.style.width = Math.random()*(1.2-0.6)+0.6 + "rem";
  8.         img.style.height =  "auto";
  10.         img.style.left = left + "px";
  11.         img.style.bottom = "100%";
  12.         document.getElementsByTagName("body")[0].appendChild(img);
  13.         setTimeout(function() {
  14.             document.getElementsByTagName("body")[0].removeChild(img);
  15.         }, 20000);
  16.     }
  17.     setInterval(function() {
  18.         var left = Math.random() * window.innerWidth;
  19.         var top =0;
  20.         // var src = "images/gift" + Math.floor(Math.random() * 6 + 1) + ".png";
  21.         var src = "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2742336169,1171788391&fm=26&gp=0.jpg";
  22.         snow(left, top, src);
  23.     }, 1000);
  24.     /*漂浮物end*/
  25. </script>

不需要 div，直接添加在 body 里面了