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

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個轉(zhuǎn)換函數(shù)，3個要背

3D，學(xué)習(xí)1個轉(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è)置x軸和y軸的縮放倍數(shù)

v1>=1 放大

0

-1

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

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

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

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

③旋轉(zhuǎn)

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

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

旋轉(zhuǎn)的問題

1.通過設(shè)置轉(zhuǎ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都是模擬的

透視距離，會影響人看這個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值在兩個狀態(tài)間，在一段時間內(nèi)平緩的變化過程

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

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

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

哪些屬性是支持過渡

1.顏色屬性

2.陰影

3.轉(zhuǎn)換

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

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

transition-duration: s/ms;

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

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

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

linear 勻速運動

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

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

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

4.過渡的延遲

transition-delay: 2s;

5.過渡代碼的編寫位置

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

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

6.過渡的簡寫方式

transition: property duration timing-functin delay;

最簡方式 transition: duration；

五.動畫

過渡 動畫

兩個css之間的變化 兩個，兩個以上css的變化

偽類激活過渡 F5和偽類激活動畫

1.關(guān)鍵幀

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

來控制動畫的每一個狀態(tài)

2.使用

①創(chuàng)建動畫

@keyframes 動畫名稱{

0% | from{樣式…}

…

99.99% | to{樣式…}

}

②調(diào)用動畫

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

animation-name: change;

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

animation-duration: 5s;

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

animation-timing-function: ease;

/ 設(shè)置延遲 */

animation-delay: 0s;

3.動畫的專有屬性

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

animation-iteration-count:

具體的數(shù)字

infinite;

②動畫的播放順序

animation-direction:

normal 0~~100

reverse; 100~0

③動畫的簡寫方式

animation:name duration timg-function delay count direction;

最簡方式 animation:name duration;

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

animation-fill-mode:

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

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

both 前后都填充

的使用

是全世界程序員共用的動畫庫

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

CSS優(yōu)化

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

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

提升用戶體驗

優(yōu)化的原則

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

在頁面的頂部引入css文件

將css和js寫在獨立的文件中

代碼優(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ī)則,只要適合你的項目，怎么寫怎么對

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

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

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

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

分享題目：CSS學(xué)習(xí)筆記（五）
網(wǎng)址分享：http://bm7419.com/news/188058.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)網(wǎng)站建設(shè)、ChatGPT、軟件開發(fā)、微信小程序、手機網(wǎng)站建設(shè)、面包屑導(dǎo)航

廣告

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