css3網(wǎng)頁設(shè)計(jì)公開課源碼與筆記第二天

1、傳智播客 網(wǎng)頁平面設(shè)計(jì)學(xué)院 只花一份錢，同時(shí)掌握網(wǎng)頁、平面、UI、Flash四種技能 傳智播客 網(wǎng)頁平面設(shè)計(jì)學(xué)院 只花一份錢，同時(shí)掌握網(wǎng)頁、平面、UI、Flash四種技能 CSS3 公開課第二天 透過淘寶去看CSS3主講教師：劉曉強(qiáng)傳智播客 網(wǎng)頁平面設(shè)計(jì)學(xué)院 HYPERLINK 發(fā)布 目錄 TOC o 1-3 h u HYPERLINK l _Toc14461 1.1 2d 轉(zhuǎn)換 ： transform PAGEREF _Toc14461 3 HYPERLINK l _Toc17805 1.2 過渡 transition PAGEREF _Toc17805 3 HYPERLINK l _Toc

2、1694 1.3 CSS3 圓角效果 PAGEREF _Toc1694 5 HYPERLINK l _Toc8089 1.4 CSS3 盒子陰影效果 box-shadow PAGEREF _Toc8089 6 HYPERLINK l _Toc16717 1.5 內(nèi)核前綴： PAGEREF _Toc16717 6 HYPERLINK l _Toc21172 1.6 字體圖標(biāo) PAGEREF _Toc21172 7 HYPERLINK l _Toc17831 1.7 字體圖標(biāo)使用三部曲： PAGEREF _Toc17831 8 HYPERLINK l _Toc5961 1.7.1 1.先從網(wǎng)上下載

3、字體; PAGEREF _Toc5961 8 HYPERLINK l _Toc805 1.7.2 聲明字體 PAGEREF _Toc805 8 HYPERLINK l _Toc15549 1.7.3 3引用字體 PAGEREF _Toc15549 9復(fù)習(xí)： Css3 比較重要的知識(shí)點(diǎn)： 2d 轉(zhuǎn)換 ： transform Deg 度數(shù) Transform：rotate(90deg) 當(dāng)我們的鼠標(biāo)，經(jīng)過這個(gè)圖片的時(shí)候，才旋轉(zhuǎn)180度。以前js 和CSS分工很明確Js 就是行為 做特效（交互動(dòng)畫）CSS 樣式 做美化 CSS3也可以做動(dòng)畫 出現(xiàn)了 js 和CSS 他們的代溝很小了。 過渡 tran

4、sitionTransition:要變化的屬性名稱 需要花費(fèi)的時(shí)間 運(yùn)動(dòng)方式 何時(shí)開始； 要變化的屬性名稱： width height transform運(yùn)動(dòng)方式：注意：1.transition 通常和 hover 配合使用。2. 時(shí)間的單位是s 所以，時(shí)間后面必須加s例如：0.25s何時(shí)開始 如果是0s ，當(dāng)鼠標(biāo)放上去立馬執(zhí)行。 4。 里面如果連寫中間用逗號(hào)隔開。 例如：transition:box-shadow 0.3s ease-in 0s,transform 0.3s ease-in 0s;建議： 我們能用CSS做的，就不要用js去做，因?yàn)閖s 的執(zhí)行效率太低了。提問：你眼中的盒子都是

5、什么形狀的。CSS3 圓角效果 Border-radius:參數(shù)；參數(shù)的單位可以使絕對(duì)的像素(px)也可以用相對(duì)單位(%)Border-radius: 左上角 右上角 右下角 左下角；CSS3 盒子陰影效果 box-shadowBox-shadow:水平陰影位置 垂直陰影位置 模糊（羽化）距離 陰影大小（尺寸） 陰影的顏色 內(nèi)陰影/外陰影; 創(chuàng)新=模仿+改良注意： 默認(rèn)的是外側(cè)陰影（outset），這里我們需要內(nèi)側(cè)陰影（inset）因?yàn)檫吙蚨际菍?shí)線 陰影有模糊的效果Css 層疊樣式表Css3 是很好，但是里面很多地方瀏覽器不兼容需要我們根據(jù)瀏覽器的內(nèi)核添加前綴。內(nèi)核前綴：火狐瀏覽器 -moz-

6、谷歌和蘋果 -webkit-Ie9以及以上版本 -ms-歐朋 -o-早期的蘋果瀏覽器（safari） linux konqueror(征服者)需要加：-khtml-谷歌2013 自己開發(fā)了新的內(nèi)核 blink 但是前綴還是-webkit-字體圖標(biāo) 以后的主流逐漸會(huì)用圖標(biāo)字體代替精靈圖（小強(qiáng)老師預(yù)計(jì)）把一些圖標(biāo)放入自定字體中，然后使用字體替代普通圖標(biāo)的技術(shù)。好處：1 可以自由更改大小 顏色 2.添加陰影 3 ie6完全支持（ie4就開始支持）font-face 從css2 支持的 但是 css2.1 版本的給刪掉了到了CSS3 又給加上了。同樣也有缺點(diǎn)哈：比如現(xiàn)在只能是純色。 比如制作的時(shí)候稍微

7、麻煩字體圖標(biāo)使用三部曲： 1.先從網(wǎng)上下載字體; Icomoon.io I 阿里巴巴字體庫 聲明字體 font-face font-family: iconfont; /* 這里自定義字體標(biāo)題*/ src: url(iconfont.eot); /* IE9*/ src: url(iconfont.eot?#iefix) format(embedded-opentype), /* IE6-IE8 */url(iconfont.woff) format(woff), /* chrome、firefox */ url(iconfont.ttf) format(truetype), /* chrom

8、e、firefox、opera、Safari, Android, iOS 4.2+*/url(iconfont.svg#uxiconfont) format(svg); /* iOS 4.1- */小強(qiáng)老師注釋： 因?yàn)槁暶髯煮w需要照顧所有瀏覽器 因此，聲明字體稍微麻煩。3引用字體無標(biāo)題文檔font-face font-family: xiaoqiang; src: url(fonts/icomoon.eot); /* IE9*/ src: url(fonts/icomoon.eot?#iefix) format(embedded-opentype), /* IE6-IE8 */url(fonts/icomoon.woff) format(woff), /* chrome、firefox */ url(fonts/icomoon.ttf) format(truetype), /* chrome、firefox、opera、Safari, A