CSS學(xué)習(xí)筆記（五）

CSS hack

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

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

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

轉(zhuǎn)換

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

改變?cè)卦陧?yè)面中的位置，大小，角度，形狀

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)換

①位移

改變?cè)卦陧?yè)面中的位置

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

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

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

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

②縮放

改變圖片在頁(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è)置元素在頁(yè)面上的角度

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

旋轉(zhuǎn)的問(wèn)題

1.通過(guò)設(shè)置轉(zhuǎn)換原點(diǎn)，來(lái)設(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)會(huì)帶著坐標(biāo)軸一起旋轉(zhuǎn)，會(huì)影響旋轉(zhuǎn)之后的位移方向

④傾斜

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

旋轉(zhuǎn)

頁(yè)面中的3D都是模擬的

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

設(shè)置透視距離，一定要寫(xiě)在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)門(mén)

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

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

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

過(guò)渡

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

1.指定參與過(guò)渡的css屬性

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

all; 支持過(guò)渡屬性，都參與過(guò)渡

哪些屬性是支持過(guò)渡

1.顏色屬性

2.陰影

3.轉(zhuǎn)換

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

2.設(shè)置過(guò)渡的出持續(xù)時(shí)長(zhǎng)

transition-duration: s/ms;

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

transition-timing-function: （貝塞爾曲線(xiàn)）

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

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

ease-in 慢慢開(kāi)始，一直提速

ease-out 急速開(kāi)始，一直減速

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

4.過(guò)渡的延遲

transition-delay: 2s;

5.過(guò)渡代碼的編寫(xiě)位置

過(guò)渡代碼寫(xiě)在原來(lái)的樣式中，過(guò)渡效果，有去有回

寫(xiě)在偽類(lèi)中，過(guò)渡效果，有去無(wú)回

6.過(guò)渡的簡(jiǎn)寫(xiě)方式

transition: property duration timing-functin delay;

最簡(jiǎn)方式 transition: duration；

五.動(dòng)畫(huà)

過(guò)渡 動(dòng)畫(huà)

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

偽類(lèi)激活過(guò)渡 F5和偽類(lèi)激活動(dòng)畫(huà)

1.關(guān)鍵幀

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

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

2.使用

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

@keyframes 動(dòng)畫(huà)名稱(chēng){

0% | from{樣式…}

…

99.99% | to{樣式…}

}

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

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

animation-name: change;

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

animation-duration: 5s;

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

animation-timing-function: ease;

/ 設(shè)置延遲 */

animation-delay: 0s;

3.動(dòng)畫(huà)的專(zhuān)有屬性

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

animation-iteration-count:

具體的數(shù)字

infinite;

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

animation-direction:

normal 0~~100

reverse; 100~0

③動(dòng)畫(huà)的簡(jiǎn)寫(xiě)方式

animation:name duration timg-function delay count direction;

最簡(jiǎn)方式 animation:name duration;

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

animation-fill-mode:

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

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

both 前后都填充

的使用

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

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

CSS優(yōu)化

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

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

提升用戶(hù)體驗(yàn)

優(yōu)化的原則

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

在頁(yè)面的頂部引入css文件

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

代碼優(yōu)化

盡量合并樣式 （能群組就群組，能簡(jiǎn)寫(xiě)就簡(jiǎn)寫(xiě)）

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

代碼壓縮，壓縮之后代碼在名稱(chēng)會(huì)添加min

css reset

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

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

①都清除

②給統(tǒng)一值

1. css reset

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

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

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

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

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

分享標(biāo)題：CSS學(xué)習(xí)筆記（五）
地址分享：http://www.bm7419.com/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)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)