CSS hack

由于低版本瀏覽器不兼容一些樣式的功能

為了讓css能夠兼容低版本瀏覽器，我們需要些css hack

-webkit--moz--o--ms-

轉(zhuǎn)換

1.什么是轉(zhuǎn)換

改變元素在頁面中的位置，大小，角度，形狀

2D轉(zhuǎn)換，只在x和y軸上進(jìn)行轉(zhuǎn)換

3D轉(zhuǎn)換，添加了Z軸

2.轉(zhuǎn)換屬性

transform:轉(zhuǎn)換函數(shù)1 轉(zhuǎn)換函數(shù)2 轉(zhuǎn)換函數(shù)3…；

2D，學(xué)習(xí)4個(gè)轉(zhuǎn)換函數(shù)，3個(gè)要背

3D，學(xué)習(xí)1個(gè)轉(zhuǎn)換函數(shù)

轉(zhuǎn)換

①位移

改變元素在頁面中的位置

transform:translate(v1); 在x軸上向右水平位移

translateX(v1) 在x軸上向右水平位移

translateY(v1) 在y軸上向下垂直位移

translate(v1,v2) 分別設(shè)置x和y的位移

②縮放

改變圖片在頁面中尺寸

transform:scale(v1); 同時(shí)設(shè)置x軸和y軸的縮放倍數(shù)

v1>=1 放大

0<v1<1 縮小

-1<v1<0 縮小并翻轉(zhuǎn)

v1<-1 放大并翻轉(zhuǎn)

scaleX(v1) 單獨(dú)設(shè)置x軸縮放

scaleY(v1) 單獨(dú)設(shè)置y軸縮放

scale(x,y) 分別設(shè)置x和y軸的縮放

③旋轉(zhuǎn)

設(shè)置元素在頁面上的角度

transform:rotate(45deg);+ 順時(shí)針，- 逆時(shí)針

旋轉(zhuǎn)的問題

1.通過設(shè)置轉(zhuǎn)換原點(diǎn)，來設(shè)置旋轉(zhuǎn)的圓心，圓心不同，旋轉(zhuǎn)效果不同

transform-origin:x y; 取值：1.px為單位的數(shù)字

2.%3.關(guān)鍵字 x:left/center/right y:top/center/bottom

2.旋轉(zhuǎn)會帶著坐標(biāo)軸一起旋轉(zhuǎn)，會影響旋轉(zhuǎn)之后的位移方向

④傾斜

skewX(ndeg)和skew(ndeg)skewY(ndeg)skew(x,y)

旋轉(zhuǎn)

頁面中的3D都是模擬的

透視距離，會影響人看這個(gè)3D轉(zhuǎn)換的效果不同

設(shè)置透視距離，一定要寫在3D轉(zhuǎn)換元素的父元素上

perspective:200px;

3D旋轉(zhuǎn)

transform:rotateX(xdeg) 元素圍繞x軸進(jìn)行旋轉(zhuǎn) 單杠，烤羊腿

rotateY(ydeg) 元素圍繞y軸進(jìn)行旋轉(zhuǎn) 土耳其烤肉，旋轉(zhuǎn)門

rotatez(zdeg) 元素圍繞z軸進(jìn)行旋轉(zhuǎn) 風(fēng)車，電風(fēng)扇，摩天輪

rotate3d(x,y,z,ndeg) x,y,z>0 參與旋轉(zhuǎn) 等于0不參與

具體取值為旋轉(zhuǎn)的倍數(shù)

過渡

css值在兩個(gè)狀態(tài)間，在一段時(shí)間內(nèi)平緩的變化過程

1.指定參與過渡的css屬性

transition-property: css屬性1 css屬性2 css屬性3.....

all; 支持過渡屬性，都參與過渡

哪些屬性是支持過渡

1.顏色屬性

2.陰影

3.轉(zhuǎn)換

4.大多數(shù)取值為具體數(shù)字的屬性

2.設(shè)置過渡的出持續(xù)時(shí)長

transition-duration: s/ms;

3.設(shè)置過渡的時(shí)間曲線函數(shù)（設(shè)置過渡的速度）

transition-timing-function: （貝塞爾曲線）

ease 默認(rèn)值，慢速開始，先加速，在減速，慢速結(jié)束

linear 勻速運(yùn)動(dòng)

ease-in 慢慢開始，一直提速

ease-out 急速開始，一直減速

ease-in-out 慢速開始，瘋狂加速，瘋狂減速，慢速結(jié)束

4.過渡的延遲

transition-delay: 2s;

5.過渡代碼的編寫位置

過渡代碼寫在原來的樣式中，過渡效果，有去有回

寫在偽類中，過渡效果，有去無回

6.過渡的簡寫方式

transition: property duration timing-functin delay;

最簡方式 transition: duration；

五.動(dòng)畫

過渡 動(dòng)畫

兩個(gè)css之間的變化 兩個(gè)，兩個(gè)以上css的變化

偽類激活過渡 F5和偽類激活動(dòng)畫

1.關(guān)鍵幀

關(guān)鍵幀，某一個(gè)時(shí)間點(diǎn)執(zhí)行的樣式

來控制動(dòng)畫的每一個(gè)狀態(tài)

2.使用

①創(chuàng)建動(dòng)畫

@keyframes 動(dòng)畫名稱{

0% | from{樣式…}

…

99.99% | to{樣式…}

}

②調(diào)用動(dòng)畫

/* 指定調(diào)用的動(dòng)畫名稱 /

animation-name: change;

/ 設(shè)置持續(xù)時(shí)間 /

animation-duration: 5s;

/ 設(shè)置時(shí)間曲線函數(shù) /

animation-timing-function: ease;

/ 設(shè)置延遲 */

animation-delay: 0s;

3.動(dòng)畫的專有屬性

①動(dòng)畫的播放次數(shù)

animation-iteration-count:

具體的數(shù)字

infinite;

②動(dòng)畫的播放順序

animation-direction:

normal 0~~100

reverse; 100~0

③動(dòng)畫的簡寫方式

animation:name duration timg-function delay count direction;

最簡方式 animation:name duration;

④動(dòng)畫的填充狀態(tài)

animation-fill-mode:

backwards 在動(dòng)畫延遲時(shí)間內(nèi)，填充動(dòng)畫的一幀

forwards 在動(dòng)畫播放結(jié)束之后，填充動(dòng)畫的最后一幀

both 前后都填充

的使用

是全世界程序員共用的動(dòng)畫庫

只要把css文件導(dǎo)入，就可以直接使用動(dòng)畫名稱了

CSS優(yōu)化

1.優(yōu)化的目的

減少服務(wù)器端的壓力

提升用戶體驗(yàn)

優(yōu)化的原則

盡量減少請求的個(gè)數(shù)-----緩存（精靈圖的使用，雪碧圖）

在頁面的頂部引入css文件

將css和js寫在獨(dú)立的文件中

代碼優(yōu)化

盡量合并樣式 （能群組就群組，能簡寫就簡寫）

避免出現(xiàn)空的href和src

代碼壓縮，壓縮之后代碼在名稱會添加min

css reset

HTML的標(biāo)簽在不同瀏覽器中，有不同的默認(rèn)樣式

一般情況下，我們在開發(fā)之前，會把這些不同的默認(rèn)樣式，進(jìn)行統(tǒng)一

①都清除

②給統(tǒng)一值

1. css reset

樣式重置，沒有規(guī)則,只要適合你的項(xiàng)目，怎么寫怎么對

css reset 很霸道，把html語義中的樣式，都清除了

這種霸道的統(tǒng)一，有人追捧，有人抵觸

是一個(gè)非常小的css文件，保留了默認(rèn)語義樣式

只為不同瀏覽器的兼容性，和bug做了修改，非常溫和

分享標(biāo)題：CSS學(xué)習(xí)筆記（五）
地址分享：http://www.2m8n56k.cn/news8/188058.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、云服務(wù)器、品牌網(wǎng)站設(shè)計(jì)、App設(shè)計(jì)、搜索引擎優(yōu)化、定制網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：[email protected]。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)