Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSS3 Basic

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.

CSS3 Basic

Avatar for Ryan Chung

Ryan Chung

June 06, 2014
Tweet

More Decks by Ryan Chung

Other Decks in Technology

Transcript

  1. http://MobileDev.TW 1-1.圓角邊框 border-radius:25px 10px 3px; CSS3 Basic 6 border-radius:25px 10px

    3px 40px; 左上25px 右上10px 右下 3px 左下10px 左上25px 右上10px 右下 3px 左下40px
  2. http://MobileDev.TW 3-1.變形 – 旋轉 transform:rotate(30deg); -webkit-transform:rotate(30deg); /* Safari and Chrome

    */ -ms-transform:rotate(30deg); /* IE 9*/ 控制旋轉的度數 CSS3 Basic 15
  3. http://MobileDev.TW 3-2.變形 – 縮放 transform:scale(2,4); -webkit-transform:scale(2,4); /* Safari and Chrome

    */ -ms-transform:scale(2,4); /* IE 9 */ 水平, 垂直 可小於1 CSS3 Basic 17
  4. http://MobileDev.TW 3-4.變形 – 漸長 transition:width 2s; -webkit-transition:width 2s; /*Safari and

    Chrome*/ -ms-transition:width 2s; /*IE 9*/ 寬度/高度 延遲秒數 CSS3 Basic 19
  5. http://MobileDev.TW -webkit-mask-box-image: url(mask.png) 50 50 50 50 stretch stretch; 1.遮罩圖片

    2~5.上、右、下、左距離 6,7.水平樣式(stretch/round)、垂直樣式 25 5-1.圖片箱形遮罩 CSS3 Basic
  6. http://MobileDev.TW -webkit-mask-box-image: url(stamp.svg) 30 30 30 30 round round; 1.遮罩圖片

    2~5.上、右、下、左距離 6,7.水平樣式(stretch/round)、垂直樣式 26 5-1.圖片箱形遮罩 CSS3 Basic
  7. http://MobileDev.TW 6.動畫 •  -webkit-keyframes 定義動畫影格 •  名稱 •  可設定from、to或x% • 

    -webkit-animation 定義動畫屬性 •  name:名稱,與keyframes對應 •  duration:動畫播放時間長度(秒) •  iteration-count:播放次數( n or infinite) •  timing-function:ease、linear、ease-in、ease -out、ease-in-out CSS3 Basic 30