【心情】世殊事異

[](http://4.bp.blogspot.com/-O5EO2Xn1EKo/UqWGOc7xaRI/AAAAAAAAEM0/dPda1T6sNAI/s1600/IMG_0440.JPG) 最近心情持續低氣壓，想在FB上抒發一下心情卻又礙於人多口雜。希望能在這找到屬於自己的另一個僻靜小天地 剛剛看到有人用CSS畫出幾個下雨的樣式，正好也符合自己的心境就來跟部落格整合一下好了。 [下雨CSS請參考](http://www.blogger.com/blogger.g?blogID=6692337573339064262) html

<div class="body">
<section class="rain"></section>
</div>

javascript

// number of drops created.
var nbDrop = 858; 

// function to generate a random number range.
function randRange( minNum, maxNum) {
  return (Math.floor(Math.random() * (maxNum - minNum + 1)) + minNum);
}

// function to generate drops
function createRain() {

 for( i=1;i < nbDrop;i++) {
 var dropLeft = randRange(0,1600);
 var dropTop = randRange(-1000,1400);

 $('.rain').append('<div class="drop" id="drop'+i+'"></div>');
 $('#drop'+i).css('left',dropLeft);
 $('#drop'+i).css('top',dropTop);
 }

}
// Make it rain
createRain();

css

div.body {
            background:#0D343A;
            background:-webkit-gradient(linear,0% 0%,0% 100%, from(rgba(13,52,58,1) ), to(#000000)  );
            background: -moz-linear-gradient(top, rgba(13,52,58,1) 0%, rgba(0,0,0,1) 100%);

            overflow:hidden;}

            .drop {
              background:-webkit-gradient(linear,0% 0%,0% 100%, from(rgba(13,52,58,1) ), to(rgba(255,255,255,0.6))  );
              background: -moz-linear-gradient(top, rgba(13,52,58,1) 0%, rgba(255,255,255,.6) 100%);
                width:1px;
                height:89px;
                position: absolute;
                bottom:200px;
                -webkit-animation: fall .63s linear infinite;
              -moz-animation: fall .63s linear infinite;
        }

        /* animate the drops*/
        @-webkit-keyframes fall {
           to {margin-top:900px;}
        }
        @-moz-keyframes fall {
           to {margin-top:900px;}
        }

[雨滴請參考](http://codepen.io/lbebber/full/uIiJp)