


版權(quán)說(shuō)明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
1、傳智播客 網(wǎng)頁(yè)平面設(shè)計(jì)學(xué)院 只花一份錢,同時(shí)掌握網(wǎng)頁(yè)、平面、UI、Flash四種技能 傳智播客 網(wǎng)頁(yè)平面設(shè)計(jì)學(xué)院 只花一份錢,同時(shí)掌握網(wǎng)頁(yè)、平面、UI、Flash四種技能 CSS3 公開(kāi)課第二天 透過(guò)淘寶去看CSS3主講教師:劉曉強(qiáng)傳智播客 網(wǎng)頁(yè)平面設(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 過(guò)渡 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)過(guò)這個(gè)圖片的時(shí)候,才旋轉(zhuǎn)180度。以前js 和CSS分工很明確Js 就是行為 做特效(交互動(dòng)畫(huà))CSS 樣式 做美化 CSS3也可以做動(dòng)畫(huà) 出現(xiàn)了 js 和CSS 他們的代溝很小了。 過(guò)渡 tran
4、sitionTransition:要變化的屬性名稱 需要花費(fèi)的時(shí)間 運(yùn)動(dòng)方式 何時(shí)開(kāi)始; 要變化的屬性名稱: width height transform運(yùn)動(dòng)方式:注意:1.transition 通常和 hover 配合使用。2. 時(shí)間的單位是s 所以,時(shí)間后面必須加s例如:0.25s何時(shí)開(kāi)始 如果是0s ,當(dāng)鼠標(biāo)放上去立馬執(zhí)行。 4。 里面如果連寫(xiě)中間用逗號(hào)隔開(kāi)。 例如:transition:box-shadow 0.3s ease-in 0s,transform 0.3s ease-in 0s;建議: 我們能用CSS做的,就不要用js去做,因?yàn)閖s 的執(zhí)行效率太低了。提問(wèn):你眼中的盒子都是
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、谷歌和蘋(píng)果 -webkit-Ie9以及以上版本 -ms-歐朋 -o-早期的蘋(píng)果瀏覽器(safari) linux konqueror(征服者)需要加:-khtml-谷歌2013 自己開(kāi)發(fā)了新的內(nèi)核 blink 但是前綴還是-webkit-字體圖標(biāo) 以后的主流逐漸會(huì)用圖標(biāo)字體代替精靈圖(小強(qiáng)老師預(yù)計(jì))把一些圖標(biāo)放入自定字體中,然后使用字體替代普通圖標(biāo)的技術(shù)。好處:1 可以自由更改大小 顏色 2.添加陰影 3 ie6完全支持(ie4就開(kāi)始支持)font-face 從css2 支持的 但是 css2.1 版本的給刪掉了到了CSS3 又給加上了。同樣也有缺點(diǎn)哈:比如現(xiàn)在只能是純色。 比如制作的時(shí)候稍微
7、麻煩字體圖標(biāo)使用三部曲: 1.先從網(wǎng)上下載字體; Icomoon.io I 阿里巴巴字體庫(kù) 聲明字體 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引用字體無(wú)標(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
溫馨提示
- 1. 本站所有資源如無(wú)特殊說(shuō)明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間,僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請(qǐng)與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 銀行風(fēng)險(xiǎn)防控體系評(píng)估與優(yōu)化研究
- 華為項(xiàng)目范圍管理辦法
- 村級(jí)經(jīng)濟(jì)規(guī)劃管理辦法
- 江蘇物業(yè)安全管理辦法
- 新工科實(shí)踐育人數(shù)字資源體系構(gòu)建
- 國(guó)際跨學(xué)科教育質(zhì)量評(píng)估體系比較研究
- 景區(qū)店鋪運(yùn)營(yíng)管理辦法
- 江西政務(wù)服務(wù)管理辦法
- 安全生產(chǎn)事故隱患泛指
- 擴(kuò)建工程的安全設(shè)施必須與主體工程
- 小規(guī)模稅務(wù)視頻教學(xué)課件
- 業(yè)務(wù)外包費(fèi)用管理制度
- 月子中心各部管理制度
- 痛風(fēng)的康復(fù)護(hù)理課件
- 公司自供自產(chǎn)品管理制度
- 2025-2030年中國(guó)多西他賽注射液行業(yè)市場(chǎng)深度分析及發(fā)展趨勢(shì)與投資研究報(bào)告
- 五育并舉與心理健康教育的融合
- 介入室耗材管理課件
- 三級(jí)直播銷售員(高級(jí))職業(yè)技能鑒定考試復(fù)習(xí)題及答案
- 炎癥后色素沉著防治專家共識(shí)(2024版)解讀
- T/SHPTA 093-2024漆面保護(hù)用聚氨酯薄膜
評(píng)論
0/150
提交評(píng)論