CSS hack

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

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

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

轉換

1.什么是轉換

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

2D轉換，只在x和y軸上進行轉換

3D轉換，添加了Z軸

2.轉換屬性

transform:轉換函數1 轉換函數2 轉換函數3…；

2D，學習4個轉換函數，3個要背

3D，學習1個轉換函數

轉換

①位移

改變元素在頁面中的位置

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

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

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

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

②縮放

改變圖片在頁面中尺寸

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

v1>=1 放大

0

-1

v1<-1 放大并翻轉

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

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

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

③旋轉

設置元素在頁面上的角度

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

旋轉的問題

1.通過設置轉換原點，來設置旋轉的圓心，圓心不同，旋轉效果不同

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

2.%3.關鍵字 x:left/center/right y:top/center/bottom

2.旋轉會帶著坐標軸一起旋轉，會影響旋轉之后的位移方向

④傾斜

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

旋轉

頁面中的3D都是模擬的

透視距離，會影響人看這個3D轉換的效果不同

設置透視距離，一定要寫在3D轉換元素的父元素上

perspective:200px;

3D旋轉

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

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

rotatez(zdeg) 元素圍繞z軸進行旋轉 風車，電風扇，摩天輪

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

具體取值為旋轉的倍數

過渡

css值在兩個狀態間，在一段時間內平緩的變化過程

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

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

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

哪些屬性是支持過渡

1.顏色屬性

2.陰影

3.轉換

4.大多數取值為具體數字的屬性

2.設置過渡的出持續時長

transition-duration: s/ms;

3.設置過渡的時間曲線函數（設置過渡的速度）

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

ease 默認值，慢速開始，先加速，在減速，慢速結束

linear 勻速運動

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

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

ease-in-out 慢速開始，瘋狂加速，瘋狂減速，慢速結束

4.過渡的延遲

transition-delay: 2s;

5.過渡代碼的編寫位置

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

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

6.過渡的簡寫方式

transition: property duration timing-functin delay;

最簡方式 transition: duration；

五.動畫

過渡 動畫

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

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

1.關鍵幀

關鍵幀，某一個時間點執行的樣式

來控制動畫的每一個狀態

2.使用

①創建動畫

@keyframes 動畫名稱{

0% | from{樣式…}

…

99.99% | to{樣式…}

}

②調用動畫

/* 指定調用的動畫名稱 /

animation-name: change;

/ 設置持續時間 /

animation-duration: 5s;

/ 設置時間曲線函數 /

animation-timing-function: ease;

/ 設置延遲 */

animation-delay: 0s;

3.動畫的專有屬性

①動畫的播放次數

animation-iteration-count:

具體的數字

infinite;

②動畫的播放順序

animation-direction:

normal 0~~100

reverse; 100~0

③動畫的簡寫方式

animation:name duration timg-function delay count direction;

最簡方式 animation:name duration;

④動畫的填充狀態

animation-fill-mode:

backwards 在動畫延遲時間內，填充動畫的一幀

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

both 前后都填充

的使用

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

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

CSS優化

1.優化的目的

減少服務器端的壓力

提升用戶體驗

優化的原則

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

在頁面的頂部引入css文件

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

代碼優化

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

避免出現空的href和src

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

css reset

HTML的標簽在不同瀏覽器中，有不同的默認樣式

一般情況下，我們在開發之前，會把這些不同的默認樣式，進行統一

①都清除

②給統一值

1. css reset

樣式重置，沒有規則,只要適合你的項目，怎么寫怎么對

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

這種霸道的統一，有人追捧，有人抵觸

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

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

分享題目：CSS學習筆記（五）
網址分享：http://m.newbst.com/news/188058.html

成都網站建設公司_創新互聯，為您提供外貿網站建設、ChatGPT、軟件開發、微信小程序、手機網站建設、面包屑導航

廣告

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