web


[新手前端]CSS3動畫效果 transition, animation 2

簡介CSS3 裡的動畫效果,其實… 是W3C的文件精簡翻譯版 另附神人範例說明。 CSS3的動畫效果可以藉由CSS的 keyframe 參數來控制動畫的 期間、重覆及重覆的模式例如重覆次數、起始延遲、暫時停止。 支援度,標準化進行中。現行的瀏覽器都支援包括IE10,但還是要加上prefix。 CSS3發佈的 transitions提供了參數可以製作簡單的動畫效果。其動畫效果是由起始參數及結束時的參數所決定。transitions 只是提供設計師一個可以指定中間過度動畫的方法。 animation和transitions最大的不同在於,tansitions是當參數改變時觸發,而animation則是直接就執行,所以動畫效果需要明確的指定關鍵影格的參數。


[新手前端]從平面設計前進 CSS-7 元素排序規則- DOM,float,position 1

繼續說明 CSS 如何控制HTML元素在頁面裡的空間及位置配置。 上篇介紹了 display 屬性,可以針對元素的盒模型有不同的設定,display 設定了元素的顯示方式以及和其他元素的互動關係,今天來談談 position 位置。 HTML元素出現在頁面什麼位置可以依據三種主要的規則: 1. 普通 DOM樹 隨著HTML 的DOM元素順序 display是塊級還是行內不同,元素由上至下,由左而右依序排列。 2. 浮動 float 元素從普通的 DOM樹順序中浮到上方圖層,然後依元素被設定的float方向延著母元素邊界排列,display:block 的元素會被蓋住,如果左右的浮動元素堆到需要換行時,會依原本DOM 樹裡的順序,如果float:left 的元素寫在比較前面就會有優先權,空間不夠的 float:right會被擠到下一行裡。如果碰到 display為table時,table會無視float,從設為tabl置開始,做出類似block的行為。 見下圖: