CSS3新增特性詳解(二)

2022-01-11 05:16:21 字數 2806 閱讀 4458

上篇博文主要介紹了css3新增特性中的靜態特性,比如新的選擇器、多背景圖、陰影、漸變等。本文主要介紹css3中新增的動態特性,如過度、動畫、變形等。

transitian:

-webkit-transition:all 0.5s linear 0.3s;

過度效果,習慣上也叫做漸變。只不過這個漸變是指為動態效果加上乙個可視的過程,要與前文中顏色的漸變區分開。

這裡還是別忘了在上文中提到的字首問題,示例中為了節省時間所以只在加了測試用瀏覽器的字首。

transition:共四個引數:

1.漸變屬性,包括none:停止漸變,all:預設值,元素產生任何屬性值變化時都執行漸變效果,通常情況下都用all, indent:指定元素的某一屬性值;

2.漸變過程的持續時間,預設值為0;

3.變化的速率,ease:逐漸變慢,linear:勻速,ease-in:加速,ease-out:減速,ease-in-out:先加速後減速,

cubic-bezier:自定義;

每個屬性都可以設定其具體的貝塞爾曲線值,不過一般情況下用linear勻速就足夠了,太另類顯得非主流。

4.變化的延遲時間。

之前在講css偽類的那篇文章中已經貼過漸變示例的gif了。

先寫一段**如下:

divdiv:hover
效果:

加入漸變:

divdiv:hover
效果:

這裡要注意的是transition不僅可以對顏色的改變產生過度效果,也可以對尺寸、位置等等的屬性均帶來過度效果。

這種效果可以在滑鼠單擊、獲得焦點、被點選或對元素任何改變中觸發,並圓滑地以動畫效果改變css的屬性值。

css3自帶的動畫特性,可以不借助js來完成一些簡單的動畫效果。但是這裡不得不說的是,keyframes的用處並不多,稍微複雜一點的動畫用js搭配css3的過度效果總是最理想的。

@-webkit-keyframes divmoveto}

div

首先建立動畫規則,最開頭用@符號,後接瀏覽器字首,後接keyframes,之後是自己定的動畫名稱。from表示起始狀態,to表示結束狀態,大括號內寫css樣式。

效果:

定義動畫規則時也可以這樣寫:

0%25%50%75%100%
這樣寫法是將動畫過程按想要的時間百分比細分,上例中from對應0%,to對應100%。

總之css3中的動畫特性由於其侷限性較大,在實際中運用並不多。

transform:

變形,它包括五種變換方式:

–旋轉rotate

–扭曲skew

–縮放scale

–移動translate

–矩陣變形matrix

其中旋轉和移動應用較多,在這裡主要介紹下。扭曲和縮放由於會導致圖形或等元素失真,實際應用很少。所以這裡只是講解下寫法而不貼例項了,有興趣的讀者自己嘗試吧。

rotate旋**

現有一div塊

加入旋轉變換:

div
其中rotate後的括號裡填旋轉的度數,單位:角度(deg)。若值為正則順時針旋轉,為負則逆時針旋轉。

效果:

這裡還要提一點就是transform-origin(x,y),它是用來定義元素基點,也就是元素變換的基準點,這旋轉這個例子中也就是說繞著哪個點旋轉。

x,y可以是具體的值,也可以是百分比,也可以是top center bottom left right這樣的引數。在未設定的情況下,預設為元素的幾何中心。

translate移動:

黑框中有一綠色方塊

移動:

#demo
效果:

還可以寫成translatex(x) translatey(y),表示只橫向或縱向移動,括號裡僅有乙個引數。

scale縮放:

寫法:scale(x,y),其中x,y表示橫、縱向縮放倍數,基值為1。若大於1表示放大,小於1表示縮小,如scale(0.8,2.5)表示橫向縮小到0.8倍,縱向放大到2.5倍。

與translate類似,縮放也可以單方向:scalex(x)&scaley(y)。

skew扭曲:

寫法:skew(x,y),x表示水平方向扭曲角度,y表示垂直方向扭曲角度。如:skew(30deg,10deg)。同上,單方向扭曲:skewx(x)&skewy(y)。

這種東西怎麼能用在網頁上呢?看的博主心理都扭曲了。

CSS3新增特性詳解

css 用於控制網頁的樣式和布局。css3 是最新的 css 標準。css3 被劃分為模組。其中最重要的 css3 模組包括 background rgba 0,0,0,0.3 div 圓角矩形設定4個角。圓角矩形可以為4個角分別設定圓度,但是是有順序的。border top left radius...

css3新增特性

css3屬性選擇器 media all screen print speech only and not min width max width orientation portrait landscape e attr value id value class value e attr value...

CSS3新增特性 transfrom

2d轉換 translate x offset,y offset 相對於自身位置的乙個偏移,單位可以設定px,相對自身的長寬 translatex translatey childrotate 20deg 給乙個順時針旋轉的度數,可為負 scale 2,3 元素的放大縮小 scalex scaley...