亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

CSS3動畫效果transition

番茄西紅柿 / 1076人閱讀

摘要：鼠標(biāo)移動觸發(fā)的動畫效果。第二個參數(shù)就是動畫耗時，默認(rèn)是，所以必不可少，要不然沒有動畫效果，沒什么可說的。多個樣式各個樣式用逗號隔開即可寬度完成變化，高度延遲執(zhí)行，完成變化，背景色完成變化效果如下未完待續(xù)

1.transition的瀏覽器支持情況

IE10+支持，IE6789都不支持！目前，其他瀏覽器最新版本都支持，不需要再加前綴 -webkit- 之類的了

2. 還是一步一步說說怎么用transition吧

頁面只有一個div，其css如下：

 1

鼠標(biāo)移動到div上，div立刻變寬為300px，效果如下：

 

現(xiàn)在在div身上加上 transition:0.5s;

 1

 

效果如下：

 

原來是瞬間，現(xiàn)在div的css樣式中加入了transition屬性，變成了緩慢的動畫了。那么問題來了，如下：

3.transition寫在哪？

 繼續(xù)上面的案例，我們寫在div上，就是告訴div，以后變化將會有過渡，為什么不是加在div:hover中？

將div里的transition:0.5s刪掉，放在div:hover中，（css代碼略）效果如下

鼠標(biāo)放在上面，效果還好，慢慢伸長，鼠標(biāo)一松，立刻變短，沒有過渡效果。為什么？

因為div:hover狀態(tài)時，有這個transition屬性，而div由短變長中，給個過渡，就有動畫。當(dāng)鼠標(biāo)離開div，不是hover狀態(tài)了，div沒有transition屬性，所以，立刻變短。

既然是變化，那就至少涉及到兩個狀態(tài)，變化前的狀態(tài)，變化后的狀態(tài)。兩個狀態(tài)不一樣，然后給予慢鏡頭過渡。就形成了動畫。

也就是說：你想讓誰的變化具有動態(tài)過渡的效果，那transition屬性就加在誰身上，還要加的讓變化前后兩個狀態(tài)，都能有transition屬性（要知道，div:hover時，也可有獲取到div中的屬性，反過來就不行了）。

在這里，變化前是div，變化后div:hover，兩個顯示出來不同。鼠標(biāo)移動觸發(fā)的動畫效果。那么這就有個問題了，如下：

4.怎么觸發(fā)transition動畫？

 上面知道，變化前div {...} ，變化后 div:hover {...} 。其中:hover狀態(tài)就是鼠標(biāo)移動過去觸發(fā)的。這種就是通過偽類觸發(fā)。

偽類觸發(fā) 比如 :hover : focus :checked :active，有了這些偽類，就有了“狀態(tài)”，有了狀態(tài)，就有了不同，有了不同，就有了過渡動畫。

還可以通過js觸發(fā)，比如說：js控制div增加個class為donghua，那么，頁面中該div增加個class，其屬性要變，如果設(shè)置過transition，那就會有動畫效果。這么理解吧：瀏覽器發(fā)現(xiàn)該div變成div.donghua了，而且發(fā)現(xiàn)形狀大小色彩等前后不一樣了，給前后狀態(tài)變化的過程來個慢鏡頭，就形成了動畫。

 1     
 2         <style type="text/css">
 3             div {
 4                 height:30px;
 5                 background-color:#FF9900;
 6                 
 7                 width:100px;
 8                 transition: 0.5s;
 9             }
10             div.donghua {
11                 width: 300px;
12             }
13         style>
14 ...
15 
16         <div class="donghua">
17             
18         div>

 

 上面的并不會有動畫效果，因為頁面顯示出來的時候，就已經(jīng)有了class="donghua" ，覆蓋了原來100px的定義，直接顯示寬度為300px了。下面?zhèn)€例子演示js控制，導(dǎo)致的變化，有了變化，也就有了動畫。

 1 DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>title>
 6         <style type="text/css">
 7             p {
 8                 height:30px;
 9                 background-color:#FF9900;
10                 
11                 width:100px;
12                 transition: 0.5s;
13             }
14             div.donghua p{
15                 width: 300px;
16             }
17         style>
18     head>
19     <body>
20         <div>
21             <p>看我的變化p>
22         div>
23         <script type="text/javascript">
24             window.onload = function(){
25                 document.body.children[0].onclick = function(){
26                     if(this.className == donghua){
27                         this.className = ;
28                     }else{
29                         this.className = donghua;
30                     }                
31                 }
32             }
33         script>
34         
39     body>
40 html>

 

效果如下：

知道動畫怎么觸發(fā)的了，下面就要講講transition的具體參數(shù)了

5.transition都有哪些參數(shù)？默認(rèn)是什么？可以怎么寫？

 transition是這四個屬性的復(fù)合樣式

屬性名描述
transition-property 指定CSS屬性的name，transition效果（元素上的什么css屬性變化，默認(rèn)是all，上面例子就是div的width變化，設(shè)置為none則無變化）
transition-duration transition效果需要指定多少秒或毫秒才能完成（可以是1s、0.5s、200ms，默認(rèn)0）
transition-timing-function 指定transition效果的轉(zhuǎn)速曲線 （勻速呢？還是先快后慢，或是先慢后快，等等...默認(rèn)ease）
transition-delay 定義transition效果開始的時候（等多久開始，默認(rèn)0）

 transition: property duration timing-function delay;

 默認(rèn)all 0 ease 0

先講講transition-property，舉例：

 1         div {
 2             width:100px;
 3             height:30px;
 4             background-color:#FF9900;
 5             transition: 1s;
 6         }
 7         div:hover {
 8             width: 300px;
 9             height: 90px;
10             background-color: green;
11         }

 

頁面只有一個div標(biāo)簽，動畫效果如下，鼠標(biāo)移上去，寬高背景色都慢慢變了：

現(xiàn)在，把上面css第5行的transition: 1s;改為transition:width 1s; 那么就只有width是漸變，其他的都是突變，效果如下：

transition-property默認(rèn)是all，這個例子就是寫的width，那就只有width漸變，也可以寫none，那就沒有漸變效果了，等于沒寫。

第二個參數(shù)就是動畫耗時 transition-duration，默認(rèn)是0，所以必不可少，要不然沒有動畫效果，沒什么可說的。

第三個參數(shù)transition-timing-function的值：

  • ease（默認(rèn)值）逐漸變慢
  • linear 勻速
  • ease-in 加速
  • ease-out 減速
  • ease-in-out 先加速后減速
  • cubic-bezier貝塞爾曲線(x1,y1,x2,y2)

 http://cubic-bezier.com/ 這個網(wǎng)站是貝塞爾曲線數(shù)據(jù)生成工具，使用貝塞爾曲線的代碼示例如下

    transition:all 1s cubic-bezier(0.27,1.01,0.95,0.22)

 

第四個參數(shù)是延遲時間，就是等待多久才開始執(zhí)行動畫。（在做導(dǎo)航欄下拉菜單時，有個延遲時間，讓鼠標(biāo)劃過時不會立即顯示，防止誤劃）上面的都沒有設(shè)置，如果設(shè)置為2s，那邊鼠標(biāo)移動上去div上，div是hover狀態(tài)，但是要等2s后，動畫執(zhí)行開始，如果不到2s鼠標(biāo)就移開了，div就不是hover狀態(tài)了，那就不執(zhí)行動畫了。

上面我們對幾個參數(shù)搞清楚了，但是有個問題就是，寬高背景要么一起開始變，要么就只有某個突然變，我要想讓寬度變化1s完成，高度變慢點2s完成，背景更慢3s完成，怎么辦？寫3次transition嗎？答曰：用逗號隔開即可。

6.transition多樣式怎么寫？

還是上面div變化的案例，代碼就不重新搬運了，只寫改動的部分。

            /* 多個樣式各個樣式用逗號隔開即可  */
            /* 寬度1s完成變化，高度延遲1s執(zhí)行，2s完成變化，背景色3s完成變化 */
            transition:width 1s, height 2s 1s, background 3s;

 

效果如下：

 

未完待續(xù)

 

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/1391.html

相關(guān)文章

  • css3中的變形（transform）、過渡（transition）、動畫（animation）屬性

    摘要：中制作動畫的幾個屬性中的變形過渡動畫。默認(rèn)值為，為時，表示變化是瞬時的，看不到過渡效果。實現(xiàn)動畫效果主要由兩部分組成通過類似動畫中的幀來聲明一個動畫在屬性中調(diào)用關(guān)鍵幀聲明的動畫。 css3中制作動畫的幾個屬性：css3中的變形（transform）、過渡（transition）、動畫（animation）。 一、 CSS3變形（transform） 語法： transform ： no...

    waruqi 評論0 收藏0

  • css3動畫屬性詳解之transform、transition、animation

    摘要：動畫屬性詳解關(guān)于制作動畫的幾個屬性變形轉(zhuǎn)換和動畫。一屬性旋轉(zhuǎn)中心為原點扭曲傾斜縮放移動矩陣變形。各個屬性的用法旋轉(zhuǎn)其中表示度。承載動畫的另一個屬性。定義動畫的名稱。一個或多個合法的樣式屬性。 css3動畫屬性詳解： 關(guān)于CSS3制作動畫的幾個屬性：變形(transform)、轉(zhuǎn)換(transition)和動畫(animation)。 一、transform 屬性： 旋轉(zhuǎn)rotate（中...

    Riddler 評論0 收藏0

  • CSS3 新特性

    摘要：語法說明對象選擇器投影方式軸偏移量軸偏移量模糊半徑陰影擴展半徑陰影顏色內(nèi)陰影，向右偏移，向下偏移，模糊半徑，陰影縮小屬性的參數(shù)設(shè)置取值陰影類型此參數(shù)可選。 CSS3 是最新的 CSS 標(biāo)準(zhǔn)，并且完全向后兼容，不過目前W3C 仍然在對 CSS3 規(guī)范進行開發(fā)，雖然標(biāo)準(zhǔn)的規(guī)范還沒有正式發(fā)布，但是現(xiàn)代瀏覽器已經(jīng)支持相當(dāng)多的 CSS3 屬性了。CSS3 提供了很多可以把玩的新特性，模糊了之前只...

    justjavac 評論0 收藏0

  • CSS3的過渡和動畫

    摘要：轉(zhuǎn)化的轉(zhuǎn)化分為以下幾種移動旋轉(zhuǎn)縮放傾斜混合每種轉(zhuǎn)化都還有對應(yīng)的版本注意閉合的內(nèi)聯(lián)元素不支持轉(zhuǎn)化，過渡和動畫如等。 過渡和動畫都是CSS3的重要部分，今天有時間，了解些相關(guān)內(nèi)容并記錄下。在開始之前，首先看看CSS3的轉(zhuǎn)化。 轉(zhuǎn)化 CSS3的轉(zhuǎn)化分為以下幾種： translate 移動 rotate　旋轉(zhuǎn) scale　縮放 skew　傾斜 matrix　混合 每種轉(zhuǎn)化都還有對應(yīng)的3d版...

    andong777 評論0 收藏0

  • 不會做動畫的程序猿不是好的動畫師（如何用css3動畫做動畫）

    摘要：一過渡一的作用二的屬性二和動畫一動畫序列書寫簡例二書寫簡例常用屬性簡寫屬性三完整動畫簡例代碼三轉(zhuǎn)換一轉(zhuǎn)換縮放移動旋轉(zhuǎn)設(shè)置元素轉(zhuǎn)換的中心點綜合性寫法二轉(zhuǎn)換三維坐標(biāo)系透視呈現(xiàn)位移旋轉(zhuǎn)一過渡一的作用如果你有一個盒子，他的體內(nèi)也有個小盒子。 ...

    xeblog 評論0 收藏0

  • 面試官: css3動畫了解嗎? 我: .......

    摘要：過渡允許的屬性值在一定的時間區(qū)間內(nèi)平滑地過渡。需要明確知道，開始狀態(tài)和結(jié)束狀態(tài)的具體數(shù)值，才能計算出中間狀態(tài)。需要事件觸發(fā)，所以沒法在網(wǎng)頁加載時自動發(fā)生。是一次性的，不能重復(fù)發(fā)生，除非一再觸發(fā)。 transition(過渡) transition允許css的屬性值在一定的時間區(qū)間內(nèi)平滑地過渡。這種效果可以在鼠標(biāo)單擊、獲得焦點、被點擊或?qū)υ厝魏胃淖冎杏|發(fā)，并圓滑地以動畫效果改變CSS的屬性值...

    番茄西紅柿 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<