雖然在國內使用 css3 距離還是有些遠,但是我們也要學習這些新技術,今天為大家分享一些很酷的 css3 特效案例,用 css3 的新特性製作7個很酷的晴雨表動畫。
（這篇文章需要一些掌握 css3 動效基礎的童鞋學習）
科普一共7個動畫，就把它們都放在一塊兒，並成一排吧。
html
css
.container
先分解這個動效，乙個外發光的圓，旋轉的兩條矩形的光影（絕對定位布局）；這裡用到 animation 、旋轉屬性 transform: rotate()、偽元素 ：before、:after；我這裡使用 sunny 和 sunny：before 做旋轉的矩形光影，sunny：after 做 外發光的圓；再用 animation 這個屬性 定義乙個旋轉的函式；
css
.sunny
.sunny:before
.sunny:after
@-webkit-keyframes sunny
100%
}@keyframes sunny
100%
}
這個"多雲" 主要由雲朵和由小到大變化的陰影組成（絕對定位布局），這裡我用 cloudy 這個 div 本身去畫乙個圓，再用 box-shadow去畫那個雲的不規則形狀；用 cloudy:after 去畫陰影。這裡有透明度上的漸變。
css
.cloudy
.cloudy:after
@-webkit-keyframes cloudy
}@keyframes cloudy
}@-webkit-keyframes cloudy_shadow
}@keyframes cloudy_shadow
}
有雨的效果除了顏色上和多雲不一樣之外（絕對定位布局），新增了乙個下雨的效果，這裡可以用 cloudy:before 去畫這個效果。
css
.rainy.rainy:after.rainy:before@-webkit-keyframes rainy}@keyframes rainy}@-webkit-keyframes rainy_shadow}@keyframes rainy_shadow}@-webkit-keyframes rainy_rain25%26%50%51%75%76%100%}@keyframes rainy_rain25%26%50%51%75%76%100%}
.rainbow.rainbow:after@-webkit-keyframes rainbow}@keyframes rainbow}@-webkit-keyframes rainbow_shadow}@keyframes rainbow_shadow}
利用border-radius，box-shadow這兩個屬性來繪製彩虹（絕對定位布局）。
css
.rainbow.rainbow:after@-webkit-keyframes rainbow}@keyframes rainbow}@-webkit-keyframes rainbow_shadow}@keyframes rainbow_shadow}
利用絕對定位 starry 這個 div 負責畫星星背景，starry：after 負責畫出月亮（先畫出矩形長條，再用 border-radius 畫出 月牙）（絕對定位布局）
css
.starry.starry:after@-webkit-keyframes starry}@keyframes starry}@-webkit-keyframes starry_star}@keyframes starry_star}
雷電的效果同理（絕對定位布局），新增了乙個雷電的效果，這裡可以用 stormy:before 和 animation 去繪出這個效果。
css
.stormy.stormy:after.stormy:before@-webkit-keyframes stormy}@keyframes stormy}@-webkit-keyframes stormy_shadow}@keyframes stormy_shadow}@-webkit-keyframes stormy_thunder5%10%15%}@keyframes stormy_thunder5%10%15%}
下雪的效果和下雨的效果除了顏色上不一樣之外（絕對定位布局），只不過是把雨點的形狀變成了圓形。
css
.snowy.snowy:after.snowy:before@-webkit-keyframes snowy}@keyframes snowy}@-webkit-keyframes snowy_shadow}@keyframes snowy_shadow}@-webkit-keyframes snowy_snow25%26%50%51%75%76%100%}@keyframes snowy_snow25%26%50%51%75%76%100%}
是不是感覺很酷？？？ 好了今天就到這兒，下篇文章見。
css3 愛心情書
程式設計師的浪漫 乙個簡單的愛心情書網頁製作 效果圖如下 如下 html div id contain div class love div class right div div class left div div p id pmd span i span love you p div css ...
css3新動 CSS3 動畫
注意 1 animation play state 也是 animation 的簡寫屬性，但在 webkit 中不適用 animation myfirst 5s infinite linear paused 即 animation name myfirst animation duration 5s...
CSS3 總結（二十） 彈性盒子（CSS3）
2.在彈性容器中可以設定min width max width屬性來限制彈性子元素的最小及最大縮放寬度。用在彈性容器 3.flex direction 屬性 用在彈性容器 指定了彈性子元素在父容器中的位置。值說明 row橫向從左到右排列 左對齊 預設的排列方式。row reverse 反轉橫向排列 ...