在天氣預報類的web移動應用中，常常需要實現螢幕的雨滴效果，表示陰雨天氣。
感覺上比較神奇，其實想通了，這個效果的實現只需要一點物理知識和css3的簡單變換。
實現乙個小雨滴
首先雨滴是乙個個小的橢圓形元素：
.raindrop成倒立、縮小的實像。
「倒立」的效果可以通過旋轉180°來實現，「縮小」的效果我們這裡通過設定背景的尺寸來達到（下面把背景圖縮小到全屏的5%並居中）。
.raindrop隨機雨滴
接著我們要建立一些隨機分布的雨點物件，假如只有幾個，我們可以手動編寫css**，但如果有幾十個，直接寫css**的效率和可維護性就很差了。
我們使用scss的random方法，來隨機微調雨點物件的尺寸和絕對位置。
@for $i from 1 through $raindrops)
}
我們還可以給雨滴新增一點閃光的視覺效果，通過css3濾鏡來實現：
.raindrop你還可以基於該作品新增css3動畫（新增一些@keyframes即可），實現下雨的效果。
如何基於canvas來模擬真實雨景
注意：如果離線測試以上**，請自行新增瀏覽器字首或prefixfree指令碼。
by iefreer
Css3 Scss 常用的布局設定 通用
一 垂直居中 第一種 絕對定位 parent 第二種 flex布局 parent 第三種 margin parent 二 水平居中 多個塊級元素 parent 絕對定位 parent 塊級元素 parent 行內元素 parent flex布局 parent 三 左定寬右自適應 flex 布局 bo...
如何使用CSS3實現乙個3D相簿
css3系列我已經寫過兩篇文章了，在這貼出鏈結，感興趣的同學可以看一下css3初體驗之奇技淫巧，css3 3d立方體效果 transform也不過如此 第一篇主要列出了一些常用或經典的css3技巧和方法 第二篇是乙個用css3實現的立方體例項，詳細講解了3d旋轉和transform等屬性。本文再來利...
如何使用 CSS3 偽類
在 這些新的 css3 偽類之前，先簡要回顧追溯一下這些在 web 應用中常常被誤解的 css 選擇器。在 1996 年，當 css1 的規範完成後，一些偽類選擇器已被囊括在內，其中許多你幾乎每天都在使用。例如 這些狀態都可以被應用到某個元素，通常是以 a 偽類名 css2 來了和 lang 新偽類...