CSS3 標籤使用說明

2022-04-12 09:21:31 字數 2211 閱讀 8100

transform:rotate(20deg):順時針旋轉20°

rotate()用來2d旋轉改變角度。支援負數,表示逆時針。

transform:translate(80px,-20px):右移80畫素,上移20畫素

translate()用來移動元素位置。支援負數,表示反方向。

transform:scale(2,4):寬度變為原來的2倍,高度變為原來的4倍。

scale()用來放大或縮放元素大小。支援負數,但,元素按3d效果翻轉180°,如果用於文字將變得不可讀。

transform:skew(20deg,30deg):繞y軸偏移20°,繞x軸偏移30°

skew()用來2d旋轉元素橫向和縱向位置。skew(20deg,-20deg)與rotate(-20deg)效果相同,skew設定的正數是逆時針旋轉。

transform:matrix()有六個引數,用的矩陣。比較奇葩而且很難理解,就不學習了吧!

matrix()合併了所有的2d方法,旋轉(rotate())、移動(tanslate())、縮放(scale())、傾斜(skew())。

transform:rotatex(20deg):繞x軸旋轉20°

rotatex()用來繞x軸3d旋轉元素。相應的有rotatey()繞y軸3d旋轉元素。

transition:width 2s,transform 3s;:改變寬度效果時持續2秒,改變轉換效果時持續3秒。

transition用來使元素從乙個效果逐漸過渡到另乙個效果。

transition-delay用來設定過渡效果何時開始。

transition-duration規定完成過渡效果需要的時間。個人感覺,除了省去了指定css屬性名稱,效果跟transition並無區別。

transition-property用來指定執行過渡效果的css屬性。

transition-timing-function用來設定過渡曲線。linear勻速過渡;ease開始慢中間快結束慢;ease-in慢速開始;ease-out慢速結束;ease-in-out慢速開始慢速結束。

div@keyframes myfirst25% 100% }

0%相當於from,100%相當於to。這段**是讓div元素背景發生變化,持續時間為5秒。

animation-name設定動畫名稱

animation-duration規定動畫持續時間

animation-timing-function設定時間曲線,ease開始慢中間快結束慢,ease-in開始慢,ease-out結束慢,ease-in-out慢開始慢結束

animation-delay設定動畫何時開始

background:linear-gradient(red,blue)設定背景色從上到下從紅色線性漸變到藍色。

background:linear-gradient(to right bottom,red,blue)設定從左上角到右下角漸變,這是標準寫法,一般放最下面。

background:-webkit-linear-gradient(left top,red,blue)chrome和safari寫法。

background:-moz-linear-gradient(right bottom,red,blue)firefox寫法。

background:-o-linear-gradient(right bottom,red,blue)opera寫法。

可以多種顏色漸變,可以任意角度漸變,顏色可以使用rgba,可以多條線性漸變repeating-linear-gradient(right,red 20%,blue 10%)

radial-gradient徑向漸變

SiteMesh標籤使用說明

itemesh包括兩大標籤庫。decorator tags 被用於建立裝飾器頁面.page tags 被用於從原始內容頁面訪問裝飾器.做乙個簡單的介紹,了解一下各標籤的作用。1.插入原始頁面 被包裝頁面 的head標籤中的內容 不包括head標籤本身 2.插入原始頁面的標籤中的內容 不包括body標...

SiteMesh標籤使用說明

1.插入原始頁面的標籤中的內容。沒有屬性。2.插入原始頁面的標籤中的內容。注釋 裝飾jsp 可以在裝飾頁面body中使用如上語法來獲得被裝飾頁面的事件。3.插入被裝飾頁面的title標籤中的內容 default屬性 當沒有在被裝飾頁面找到title中有內容時此值被插入 4.插入原始頁面的proper...

phpcms 模板標籤使用說明

使用phpcms總是要查詢各種標籤,實在很煩,只好找個比較全的來備查。因為自己寫乙個orm來配合呼叫也沒那麼容易無縫的嵌入到引擎當中。獲取父分類下面的子分類 結果可以用在sql 的in子句中 呼叫根目錄下phpcms template content header檔案 字符集 gbk或者utf 8 ...