TShopping

 找回密碼
 註冊
搜索
查看: 2153|回復: 0

[教學] CSS3 transition 屬性 及 範例

[複製鏈接]
發表於 2014-12-24 11:29:47 | 顯示全部樓層 |閱讀模式
 
Push to Facebook
實例

把鼠標指針放到div 元素上,其寬度會從100px 逐漸變為300px:


  1. div
  2. {
  3. width:100px;
  4. transition: width 2s;
  5. -moz-transition: width 2s; /* Firefox 4 */
  6. -webkit-transition: width 2s; /* Safari 和 Chrome */
  7. -o-transition: width 2s; /* Opera */
  8. }
複製代碼

親自試一試


瀏覽器支持
IE
Firefox
Chrome
Safari
Opera

Internet Explorer 10、Firefox、Opera 和Chrome 支持transition 屬性。

Safari 支持替代的-webkit-transition 屬性。

註釋: Internet Explorer 9以及更早版本的瀏覽器不支持transition屬性。


定義和用法

transition 屬性是一個簡寫屬性,用於設置四個過渡屬性:

  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay

註釋:請始終設置transition-duration屬性,否則時長為0,就不會產生過渡效果。


默認值:all 0 ease 0
繼承性:no
版本:CSS3
JavaScript 語法:object .style.transition="width 2s"

語法
  1. transition: property duration timing-function delay;
複製代碼



描述
transition-property規定設置過渡效果的CSS 屬性的名稱。
transition-duration規定完成過渡效果需要多少秒或毫秒。
transition-timing-function規定速度效果的速度曲線。
transition-delay定義過渡效果何時開始。

上一節花了大篇幅整理了CSS3中動畫屬性中的Transform,今天我們接著一起來看CSS3動畫屬性中的另一個屬性Transition。

W3C標準中對css3的transition這是樣描述的:“css的transition允許css的屬性值在一定的時間區間內平滑地過渡。這種效果可以在鼠標單擊、獲得焦點、被點擊或對元素任何改變中觸發,並圓滑地以動畫效果改變CSS的屬性值。”

下面我們同樣從其最語法和屬性值開始一步一步來學習transition的具體使用

語法:

  1. transition : [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]*
複製代碼



transition主要包含四個屬性值:執行變換的屬性:transition-property,變換延續的時間:transition-duration,在延續時間段,變換的速率變化transition-timing-function,變換延遲時間transition-delay。下面分別來看這四個屬性值

一、transition-property:

語法:

  1. transition-property : none | all | [ <IDENT> ] [ ',' <IDENT> ]*
複製代碼



transition-property是用來指定當元素其中一個屬性改變時執行transition效果,其主要有以下幾個值:none(沒有屬性改變);all(所有屬性改變)這個也是其默認值;indent(元素屬性名)。當其值為none時,transition馬上停止執行,當指定為all時,則元素產生任何屬性值變化時都將執行transition效果,ident是可以指定元素的某一個屬性值。其對應的類型如下:

1、color: 通過紅、綠、藍和透明度組件變換(每個數值處理)如:background-color,border-color,color,outline-color等css屬性;

2、length: 真實的數字如:word-spacing,width,vertical-align,top,right,bottom,left,padding,o​​utline-width,margin,min-width,min-height,max-width,max-height ,line-height,height,border-width,border-spacing,background-position等屬性;

3、percentage:真實的數字如:word-spacing,width,vertical-align,top,right,bottom,left,min-width,min-height,max-width,max-height,line-height,height,background -position等屬性;

4、integer離散步驟(整個數字),在真實的數字空間,以及使用floor()轉換為整數時發生如:outline-offset,z-index等屬性;

5、number真實的(浮點型)數值,如:zoom,opacity,font-weight,等屬性;

6、transform list:詳情請參閱:《CSS3 Transform》

7、rectangle:通過x, y, width 和height(轉為數值)變換,如:crop

8、visibility: 離散步驟,在0到1數字範圍之內,0表示“隱藏”,1表示完全“顯示”,如:visibility

9、shadow: 作用於color, x, y 和blur(模糊)屬性,如:text-shadow

10、gradient: 通過每次停止時的位置和顏色進行變化。它們必須有相同的類型(放射狀的或是線性的)和相同的停止數值以便執行動畫,如:background-image

11、paint server (SVG): 只支持下面的情況:從gradient到gradient以及color到color,然後工作與上麵類似

12、space-separated list of above:如果列表有相同的項目數值,則列表每一項按照上面的規則進行變化,否則無變化

13、a shorthand property: 如果縮寫的所有部分都可以實現動畫,則會像所有單個屬性變化一樣變化

具體什麼css屬性可以實現transition效果,在W3C官網中列出了所有可以實現transition效果的CSS屬性值以及值的類型,大家可以點這裡了解詳情。這裡需要提醒一點是,並不是什麼屬性改變都為觸發transition動作效果,比如頁面的自適應寬度,當瀏覽器改變寬度時,並不會觸發transition的效果。但上述表格所示的屬性類型改變都會觸發一個transition動作效果。

二、transition-duration:

語法:

  1. transition-duration : <time> [, <time>]*
複製代碼



transition-duration是用來指定元素轉換過程的持續時間,取值:<time>為數值,單位為s(秒)或者ms(毫秒),可以作用於所有元素,包括:before和:after偽元素。其默認值是0,也就是變換時是即時的。

三、transition-timing-function:

語法:

  1. <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*
複製代碼



取值:

transition-timing-function的值允許你根據時間的推進去改變屬性值的變換速率,transition-timing-function有6個可能值:

1、ease:(逐漸變慢)默認值,ease函數等同於貝塞爾曲線(0.25, 0.1, 0.25, 1.0).

2、linear:(勻速),linear 函數等同於貝塞爾曲線(0.0, 0.0, 1.0, 1.0).

3、ease-in:(加速),ease-in 函數等同於貝塞爾曲線(0.42, 0, 1.0, 1.0).

4、ease-out:(減速),ease-out 函數等同於貝塞爾曲線(0, 0, 0.58, 1.0).

5、ease-in-out:(加速然後減速),ease-in-out 函數等同於貝塞爾曲線(0.42, 0, 0.58, 1.0)

6、cubic-bezier:(該值允許你去自定義一個時間曲線),特定的cubic-bezier曲線。(x1, y1, x2, y2)四個值特定於曲線上點P1和點P2。所有值需在[0, 1]區域內,否則無效。

其是cubic-bezier為通過貝賽爾曲線來計算“轉換”過程中的屬性值,如下曲線所示,通過改變P1(x1, y1)和P2(x2, y2)的坐標可以改變整個過程的Output Percentage。初始默認值為default.
1.png


其他幾個屬性的示意圖:

2.png

四、transition-delay:

語法:

  1. transition-delay : <time> [, <time>]*
複製代碼



transition-delay是用來指定一個動畫開始執行的時間,也就是說當改變元素屬性值後多長時間開始執行transition效果,其取值:<time>為數值,單位為s(秒)或者ms(毫秒),其使用和transition-duration極其相似,也可以作用於所有元素,包括:before和:after偽元素。默認大小是"0",也就是變換立即執行,沒有延遲。

有時我們不只改變一個css效果的屬性,而是想改變兩個或者多個css屬性的transition效果,那麼我們只要把幾個transition的聲明串在一起,用逗號(“,”)隔開,然後各自可以有各自不同的延續時間和其時間的速率變換方式。但需要值得注意的一點:transition-delay與transition-duration的值都是時間,所以要區分它們在連寫中的位置,一般瀏覽器會根據先後順序決定,第一個可以解析為時間的怭值為transition-duration第二個為transition-delay。如:

  1. a {
  2.     -moz-transition: background 0.5s ease-in,color 0.3s ease-out;
  3.     -webkit-transition: background 0.5s ease-in,color 0.3s ease-out;
  4.     -o-transition: background 0.5s ease-in,color 0.3s ease-out;
  5.     transition: background 0.5s ease-in,color 0.3s ease-out;
  6.   }
複製代碼



如果你想給元素執行所有transition效果的屬性,那麼我們還可以利用all屬性值來操作,此時他們共享同樣的延續時間以及速率變換方式,如:

  1. a {
  2.     -moz-transition: all 0.5s ease-in;
  3.     -webkit-transition: all 0.5s ease-in;
  4.     -o-transition: all 0.5s ease-in;
  5.     transition: all 0.5s ease-in;
  6.   }
複製代碼



綜合上述我們可以給transition一個速記法:transition: <property> <duration> <animation type> <delay>如下圖所示:

3.png

相對應的一個示例代碼:

  1. p {
  2.   -webkit-transition: all .5s ease-in-out 1s;
  3.   -o-transition: all .5s ease-in-out 1s;
  4.   -moz-transition: all .5s ease-in-out 1s;
  5.   transition: all .5s ease-in-out 1s;
  6. }
複製代碼



瀏覽器的兼容性:
4.png


因為transition最早是有由webkit內核瀏覽器提出來的,mozilla和opera都是最近版本才支持這個屬性,而我們的大眾型瀏覽器IE全家都是不支持,另外由於各大現代瀏覽器Firefox,Safari ,Chrome,Opera都還不支持W3C的標準寫法,所以在應用transition時我們有必要加上各自的前綴,最好在放上我們W3C的標準寫法,這樣標準的會覆蓋前面的寫法,只要瀏覽器支持我們的transition屬性,那麼這種效果就會自動加上去:

  
  1. //Mozilla内核
  2.    -moz-transition : [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]*
  3.    //Webkit内核
  4.    -webkit-transition : [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]*
  5.    //Opera
  6.    -o-transition : [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]*
  7.    //W3C 标准
  8.    transition : [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]*
複製代碼



通過上面,我想大家對CSS3的Transition屬性的使用有一定的概念存在了,下面為了加強大家在這方面的使用,我們一起來看下面的DEMO。我們通過實踐來鞏固前面的理論知識,也通過實踐來加強transition的記憶。

DEMO一:

DEMO一我們主要是在一個div中放置了幾個小塊,分別是對應了transition-timing-function中的幾種類型,我們在div的hover狀態下,改變其部分屬性,從而達到一種動畫效果。我們也可以使用jq來點擊一個按鈕,觸發這個div(說簡單點就是通過按鈕的點擊事件給這個div加上一個class,讓其子元素都觸發相對應的transition動畫效果),為了讓大家能更好的學習和理解,我把相應的代碼貼在這裡,感興趣的朋友就跟著做一下吧,也可以直接把代碼複製到你本地頁面運行查看效果。

Html Code:

  1. <a id="timings-demo-btn">click</a>
  2.   <div id="timings-demo">
  3.     <div id="ease" class="demo-box">Ease</div>
  4.     <div id="ease-in" class="demo-box">Ease-in</div>
  5.     <div id="ease-out" class="demo-box">Ease-out</div>
  6.     <div id="ease-in-out" class="demo-box">Ease-in-out</div>
  7.     <div id="linear" class="demo-box">Linear</div>
  8.     <div id="cubic-bezier" class="demo-box">Cubic-bezier</div>
  9.   </div>
複製代碼



CSS Code:

  
  1. #timings-demo {
  2.      border: 1px solid #ccc;
  3.      padding: 10px;
  4.      height: 400px;
  5.      width: 400px;
  6.    }
  7.      
  8.   .demo-box {
  9.      width: 100px;
  10.      height: 50px;
  11.      text-align: center;
  12.      line-height: 50px;
  13.      text-align: center;
  14.      color: #fff;
  15.      background: #96c;
  16.      -moz-border-radius: 5px;
  17.      -webkit-border-radius: 5px;
  18.      border-radius: 5px;
  19.      -moz-box-shadow: inset 0 0 5px rgba(102, 153, 0,0.5);
  20.      -webkit-box-shadow: inset 0 0 5px rgba(102, 153, 0,0.5);
  21.      box-shadow: inset 0 0 5px rgba(102, 153, 0,0.5);
  22.      margin-bottom: 10px;
  23.   }
  24.   //ease效果:        
  25.   #ease {
  26.      -moz-transition: all 5s ease 0.3s;
  27.      -webkit-transition: all 5s ease 0.3s;
  28.      -o-transition: all 5s ease 0.3s;
  29.      transition: all 5s ease 0.3s;
  30.      background: #f36;      
  31.   }
  32.   //ease-in效果:
  33.   #ease-in {
  34.      -moz-transition: all 3s ease-in 0.5s;
  35.      -webkit-transition: all 3s ease-in 0.5s;
  36.      -o-transition: all 3s ease-in 0.5s;
  37.      transition: all 3s ease-in 0.5s;
  38.      background: #369;
  39.   }
  40.   //ease-out效果:
  41.   #ease-out {
  42.     -moz-transition: all 5s ease-out 0s;
  43.     -webkit-transition: all 5s ease-out 0s;
  44.     -o-transition: all 5s ease-out 0s;
  45.     transition: all 5s ease-out 0s;
  46.     background: #636;      
  47.   }
  48.   //ease-in-out效果:
  49.   #ease-in-out {
  50.     -moz-transition: all 1s ease-in-out 2s;
  51.     -webkit-transition: all 1s ease-in-out 2s;
  52.     -o-transition: all 1s ease-in-out 2s;
  53.     transition: all 1s ease-in-out 2s;
  54.     background: #3e6;
  55.   }
  56.   //linear效果:
  57.   #linear {
  58.     -moz-transition: all 6s linear 0s;
  59.     -webkit-transition: all 6s linear 0s;
  60.     -o-transition: all 6s linear 0s;
  61.     transition: all 6s linear 0s;
  62.     background: #999;
  63.   }
  64.   //cubic-bezier效果:
  65.   #cubic-bezier {
  66.     -moz-transition: all 4s cubic-bezier 1s;
  67.     -webkit-transition: all 4s cubic-bezier 1s;
  68.     -o-transition: all 4s cubic-bezier 1s;
  69.     transition: all 4s cubic-bezier 1s;
  70.     background: #6d6;
  71.   }
  72.   //hover状态下或单击click按钮后demo-box产生属性变化
  73.   #timings-demo.timings-demo-hover .demo-box,
  74.     #timings-demo:hover .demo-box {
  75.     -moz-transform: rotate(360deg) scale(1.2);
  76.     -webkit-transform: rotate(360deg) scale(1.2);
  77.     -o-transform: rotate(360deg) scale(1.2);
  78.     transform: rotate(360deg) scale(1.2);
  79.     background: #369;
  80.     border: 1px solid rgba(255,230,255,08);
  81.     -moz-border-radius: 25px;
  82.     -webkit-border-radius: 25px;
  83.     border-radius: 25px;
  84.     margin-left: 280px;
  85.     height: 30px;
  86.     line-height: 30px;
  87.     margin-bottom: 15px;
  88.   }
複製代碼


使用单击事件给dimings-demo加上一个timings-demo-hover的class名,使用demo-bxo产生属性变化
  1. $(document).ready(function(){
  2.      $("#timings-demo-btn").toggle(
  3.         function(){
  4.           $(this).next("div#timings-demo").addClass("timings-demo-hover");
  5.         },function(){
  6.           $(this).next("div#timings-demo").removeClass("timings-demo-hover");
  7.      });
  8.   });
複製代碼

我們來看看其效果圖
5.png
未改變屬性效果

正在變換中
6.png
執行完動畫後的最終效果

上圖是鼠標移動到#timings-demo的div產生的效果變換示意圖,你單擊“click”按鈕同樣會產生上面的一個動畫效應,為了節約空間,這裡不在貼出示意圖。

DEMO二:

我們在來看另外一個DEMO,這個示例是通過CSS3的transition模仿製作jQuery的slideshow效果,當然這種效果跟js和jQ製作出來的是沒得比,但有時還是可以用一用的,以前騰訊就使用過這樣的一個效果。我們這個DEMO實現的效果原理跟上一個DEMO極其相似,這裡我們是通過select的change事件來觸slideshow的CSS3屬性變化,這裡應用到一部分jQuery,主要是製作數字切換和前一張下一張的按鈕,以及select的change事件。下面我把代碼貼出以供大家參考,如果你跟著做了的話,你會覺得CSS3的transition真的是魅力是無窮的。

Html Code:

  1. <div id="demoSliderContainer">
  2.     <ul id="demoSlider" class="slide-images">
  3.       <li class="slide-image">
  4.         <img src="/images/monstersinc.jpg" alt="monsters inc" />
  5.         <span>Monsters Inc</span>
  6.       </li>
  7.       <li class="slide-image">
  8.         <img src="/images/nemo.jpg" alt="nemo" />
  9.         <span>Nemo</span>
  10.       </li>
  11.       <li class="slide-image">
  12.         <img src="/images/up.jpg" alt="up" />
  13.         <span>Up</span>
  14.       </li>
  15.       <li class="slide-image">
  16.         <img src="/images/walle.jpg" alt="walle" />
  17.         <span>Wall-E</span>
  18.       </li>
  19.     </ul>
  20.     <div class="options">
  21.       <a href="javascript:;" class="prevSlide">Prev</a>
  22.       <span class="slide-pager">
  23.         <a href="" class="javascript:;">1</a>
  24.         <a href="" class="javascript:;">2</a>
  25.         <a href="" class="javascript:;">3</a>
  26.         <a href="" class="javascript:;">4</a>
  27.       </span>
  28.       <a href="javascript:;" class="nextSlide">Next</a>
  29.     </div>
  30.   </div>
  31.   <div id="options">
  32.      <label for="transitionEffect">Transition effect :</label>
  33.      <select id="transitionEffect">
  34.         <option value="transition-opacity">opacity fade</option>
  35.         <option value="transition-left">left slide</option>
  36.         <option value="transition-right">right slide</option>
  37.         <option value="transition-top">top slide</option>
  38.         <option value="transition-bottom">bottom slide</option>
  39.         <option value="transition-zoom">zoom</option>
  40.         <option value="transition-dezoom">de-zoom</option>
  41.         <option value="transition-cornerzoom">corner zoom</option>
  42.         <option value="transition-rotate">rotate</option>
  43.       </select>
  44.   </div>
複製代碼



CSS Code:

  1. #demoSliderContainer {
  2.   background: #000;
  3.   -moz-box-shadow: 1px 1px 5px #000;
  4.   -webkit-box-shadow: 1px 1px 5px #000;
  5.   box-shadow: 1px 1px 5px #000;
  6.   padding: 0;
  7.   overflow: auto;
  8.   margin: 10px auto;
  9.   width: 560px;
  10. }
  11.    
  12. #demoSlider {
  13.   border: 1px solid #000;
  14.   border-width: 5px 5px 0;
  15.   height: 220px;
  16.   margin: 0 auto;
  17.   width: 550px;
  18.   overflow: hidden;
  19.   position: relative;
  20. }
  21.    
  22. .slide-images .slide-image {
  23.   position: absolute;
  24. }
  25.    
  26. .slide-images .slide-image img {
  27.   z-index: 2;
  28. }
  29.    
  30. .slide-images .slide-image span {
  31.   background: rgba(0,0,0,0.3);
  32.   -moz-border-radius: 5px 0 0 0;
  33.   -webkit-border-radius: 5px 0 0 0;
  34.   border-radius: 5px 0 0 0;
  35.   bottom: 4px;
  36.   color: rgba(255,255,255,0.8);
  37.   font-size: 14px;
  38.   font-weight: bold;
  39.   padding: 5px 10px;
  40.   position: absolute;
  41.   right: 0;
  42.   z-index: 3;
  43. }
  44. .slide-images .slide-image.current img {
  45.   z-index: 12;
  46. }
  47.    
  48. .slide-images .slide-image.current span {
  49.   z-index: 13;
  50. }
  51.    
  52. #demoSliderContainer .options {
  53.   padding: 3px 10px;
  54.   text-align: center;
  55. }
  56. #demoSliderContainer .options a {
  57.   color: #91BECC;
  58.   font-family: Georgia,Serif;
  59.   font-size: 12px;
  60.   font-weight: bold;
  61.   text-decoration: none;
  62. }
  63. #demoSliderContainer .options a:hover {
  64.   color: #D3E5EB;
  65. }
  66. #demoSliderContainer .slide-pager a {
  67.   -moz-transition-duration: 0.5s;
  68.   -webkit-transition-duration: 0.5s;
  69.   -o-transition-duration: 0.5s;
  70.   transition-duration: 0.5s;
  71. }
  72. #demoSliderContainer .slide-pager a.current {
  73.   background-color: #91BECC;
  74.   border-radius: 5px 5px 5px 5px;
  75.   color: black;
  76.   padding: 0 4px;
  77. }
  78. #demoSliderContainer .options .prevSlide {
  79.   float: left;
  80. }
  81. #demoSliderContainer .options .nextSlide {
  82.   float: right;
  83. }
  84.    
  85. /*transition effect*/
  86. .slide-images .slide-image,
  87. .slide-images .slide-image img {
  88.    -moz-transition-duration: 1.5s;
  89.    -webkit-transition-duration: 1.5s;
  90.    -otransition-duration: 1.5s;
  91.    transition-duration: 1.5s;
  92. }
  93.    
  94. .slide-images.transition-opacity .slide-image {
  95.    opacity: 0;
  96.    width: 0;
  97. }
  98.    
  99. .slide-images.transition-opacity .slide-image.current {
  100.    opacity: 1;
  101.    width: 550px;
  102. }
  103.    
  104. .slide-images.transition-left .slide-image {
  105.    left: -550px;
  106.    opacity: 0;
  107. }
  108.    
  109. .slide-images.transition-left .slide-image.current {
  110.    left: 0;
  111.    opacity: 1;
  112. }
  113.    
  114. .slide-images.transition-right .slide-image {
  115.    right: -550px;
  116.    opacity: 0;
  117. }
  118. .slide-images.transition-right .slide-image.current {
  119.    right: 0;
  120.    opacity: 1;
  121. }
  122.    
  123.    
  124. .slide-images.transition-top .slide-image {
  125.    opacity: 0;
  126.    top: -220px;
  127. }
  128. .slide-images.transition-top .slide-image.current {
  129.    opacity: 1;
  130.    top: 0;
  131. }
  132.    
  133. .slide-images.transition-bottom .slide-image {
  134.    opacity: 0;
  135.    bottom: -220px;
  136. }
  137. .slide-images.transition-bottom .slide-image.current {
  138.    opacity: 1;
  139.    bottom: 0;
  140. }
  141.    
  142. .slide-images.transition-cornerzoom .slide-image {
  143.    opacity: 0;
  144. }
  145.    
  146. .slide-images.transition-cornerzoom .slide-image.current {
  147.    opacity: 1;
  148. }
  149.    
  150. .slide-images.transition-cornerzoom .slide-image img {
  151.    width: 0;
  152. }
  153.    
  154. .slide-images.transition-cornerzoom .slide-image.current img {
  155.    width: 550px;
  156. }
  157.    
  158. .slide-images.transition-zoom .slide-image {
  159.    opacity: 0;
  160. }
  161. .slide-images.transition-zoom .slide-image.current {
  162.    opacity: 1;
  163. }
  164. .slide-images.transition-zoom .slide-image img {
  165.    left: -275px;
  166.    position: relative;
  167.    top: -110px;
  168.    width: 1100px;
  169. }
  170. .slide-images.transition-zoom .slide-image.current img {
  171.    left: 0;
  172.    top: 0;
  173.    width: 550px;
  174. }
  175.    
  176. .slide-images.transition-dezoom .slide-image {
  177.    -moz-box-shadow: 2px 2px 8px black;
  178.    -webkit-box-shadow: 2px 2px 8px black;
  179.    box-shadow: 2px 2px 8px black;
  180.    opacity: 0;
  181. }
  182. .slide-images.transition-dezoom .slide-image.current {
  183.    opacity: 1;
  184. }
  185. .slide-images.transition-dezoom .slide-image img {
  186.    left: 275px;
  187.    position: relative;
  188.    top: 110px;
  189.    width: 0;
  190. }
  191. .slide-images.transition-dezoom .slide-image.current img {
  192.    left: 0;
  193.    top: 0;
  194.    width: 550px;
  195. }
  196.    
  197. .slide-images.transition-rotate .slide-image {
  198.    opacity: 0;
  199. }
  200. .slide-images.transition-rotate .slide-image.current {
  201.    opacity: 1;
  202. }
  203. .slide-images.transition-rotate .slide-image img {
  204.    width: 550;
  205.    height: 220px;
  206.    position: relative;
  207.    left: -550px;
  208.    top: -220px;
  209.    
  210.   }
  211.   .slide-images.transition-rotate .slide-image.current img {
  212.     width: 550px;
  213.     height: 220px;
  214.     left: 0;
  215.     top: 0;
  216.     -moz-transform: rotate(1440deg);
  217.     -webkit-transform: rotate(1440deg);
  218.     -o-transform: rotate(1440deg);
  219.     transform: rotate(1440deg);
  220.   }
  221.    
  222.    
  223.   #options {
  224.      margin: 20px auto;
  225.      padding: 5px;
  226.      width: 550px;
  227.   }
複製代碼



jQuery Code:

  1. <script type="text/javascript">
  2.     $(document).ready(function(){
  3.       $(".slide-images").each(function(){
  4.         var slider = $(this);
  5.         var slides = $(".slide-image",slider);
  6.         var sliderPages = $(".slide-pager");
  7.         
  8.         //Slide Navigation
  9.         
  10.         var currentSlideNum = 0;
  11.         slides.removeClass("current");
  12.         slides.eq(currentSlideNum).addClass("current");
  13.         sliderPages.each(function(){
  14.           var pages = $("a",this);
  15.           pages.removeClass("current");
  16.           pages.eq(currentSlideNum).addClass("current");
  17.         });
  18.         
  19.         var goToSlide = function(slideNum) {
  20.           slides.eq(currentSlideNum).removeClass("current");
  21.           slides.eq(slideNum).addClass("current");
  22.           sliderPages.each(function(){
  23.             var pages = $("a", this);
  24.             pages.eq(currentSlideNum).removeClass("current");
  25.             pages.eq(slideNum).addClass("current");
  26.           });
  27.           currentSlideNum = slideNum;
  28.         };
  29.         
  30.         var nextSlide = function() {
  31.           var nextSlideNum = currentSlideNum + 1;
  32.           if(nextSlideNum >= slides.size())
  33.             nextSlideNum = 0;
  34.             goToSlide(nextSlideNum);
  35.          
  36.         };
  37.         
  38.         var prevSlide = function() {
  39.           var prevSlideNum = currentSlideNum - 1;
  40.           if(prevSlideNum < 0)
  41.             prevSlideNum = slides.size() - 1;
  42.             goToSlide(prevSlideNum);
  43.          
  44.         };
  45.         
  46.         //transition effects
  47.         var setTransitionEffect = function(transitionEffect) {
  48.           slider.attr("class","slide-images "+ transitionEffect);
  49.         };
  50.         
  51.         $("#transitionEffect").change(function(){
  52.           setTransitionEffect($(this).val());
  53.         }).change();
  54.         
  55.         //Navigation binding
  56.         
  57.         $(".prevSlide").click(prevSlide);
  58.         $(".nextSlide").click(nextSlide);
  59.         $(".slide-pager a").each(function(i){
  60.           if(i >= slides.size()) return false;
  61.           $(this).click(function(){
  62.             goToSlide(i);
  63.           });
  64.         });
  65.         
  66.         //Auto next slide
  67.         
  68.         var lastHumanNav = 0;
  69.         $(".prevSlide, .nextSlide, .slide-pager a").click(function(){
  70.           lastHumanNav = new Date().getTime();
  71.         });
  72.         setInterval(function(){
  73.           var now = new Date().getTime();
  74.           if(now - lastHumanNav > 5000)
  75.             nextSlide();
  76.         },5000);
  77.       });
  78.     });
  79.    
  80. </script>
複製代碼



記得在你的本地頁面頭部加上jQuery的版本庫文件。

效果示意圖:

7.png

DEMO二思路來自於Greweb.fr並在其基礎上增加了right silde,bottom silde,rotate三種效果,如果你感興趣的話可以在這個基礎上增加更多的slideshow效果,比如利用transform的scale,skew等製作出更出色的效果。

上面我主要介紹了兩個實例,如果你對這兩個實例還不過癮的話,下面有更多的關於transition的實例:DEMO三DEMO

那麼今天我們關於CSS3的transition就簡單的介紹到這裡,下一節我們一起接著學習CSS3中動畫屬性的最後一個屬性動畫(animation),感興趣的可以觀注本站關於CSS3的最新更新情況。

 

臉書網友討論
*滑块验证:
您需要登錄後才可以回帖 登錄 | 註冊 |

本版積分規則



Archiver|手機版|小黑屋|免責聲明|TShopping

GMT+8, 2024-3-19 18:57 , Processed in 0.158135 second(s), 25 queries .

本論壇言論純屬發表者個人意見,與 TShopping綜合論壇 立場無關 如有意見侵犯了您的權益 請寫信聯絡我們。

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表