在css3出現之前手風琴的效果一般都是通過js或者jquery寫，無論是哪種方法，都比較繁瑣，css3的過渡:transition既簡單又完美的實現了這一效果！ demo圖:
關於css3transition這一屬性的詳解網上有很多，不了解的童鞋可以搜一下~這個效果是通過hover來改變在滑鼠進入和進出時的顯示範圍，比較繁瑣的一項工作是計算放大一張時其他平均占用顯示區域的寬度和沒有放大任何一張時（即初始狀態）每個占用顯示區域的寬度，為了突出立體效果，本例還設定了顯示區域的陰影和每張的陰影，還有乙個細節部分就是：css3未出現之前，我們設定
這個效果是相當麻煩的，現在呢，我們只需要一條命令就可以解決：background:rgba(0~255,0~255,0~255,0~1),這個a就是設定透明度用的，相當於opacity,rgb就是我們通常設定顏色用的。需要注意的地方大概就是這些，**是超簡單的，相信你看到會很興奮！
view code
1由於免費空間申請比較麻煩，所以暫時還木有申請到，沒有辦法上傳demo，請見諒！（本例中用到的大小是寬600高433的，有興趣的童鞋可以按照這個尺寸弄幾張看一下效果。）doctype html
>
2<
html
lang
="en"
>
3<
head
>
4<
meta
charset
="utf-8"
/>
5<
title
>css3 switchingimage
title
>
6<
style
>7*
8ul,li9a
10body
11.out
17.in
18.in li
28.in img
29.attention
30.attention a
31ul:hover li
32ul li:hover
33.gray
34style
>
35head
>
3637
<
body
>
38<
div
class
='out'
>
39<
ul class
='in'
>
40<
li>
41<
div
class
='attention'
>
42<
a href
='###'
title
='馬爾地夫'
>馬爾地夫
='惠州建築'
>惠州建築
='平寨水庫'
>平寨水庫
='瑞士風光'
>瑞士風光
='藍色海洋'
>藍色海洋
css3 transition過渡屬性
今天學習了css3的過渡屬性，總結一下 transition有4個屬性 第乙個是要過渡的樣式 all 所有 attr none 不寫 一般情況下都是設定某個屬性來設定過渡，例如 transition width 0.3s.第二個是運動的時間，單位是s 秒 ms 毫秒 可以為不同的屬性設定不同的運動時...
css3 transition簡單使用
selector四個引數說明如下 transition property 指 將要對selector 的哪些屬性值 多個用逗號隔開 的改變進行過渡處理，預設為all，即只要selector 的 任何乙個 css屬性發生變化 比如hover或click導致的background color變化 則對此...
認識CSS3 transition屬性
transition property duration timing function delay 1.transition property 定義過渡的屬性，預設是all，都過渡 2.transition duration過度需要的時間，以秒計時 3.transition timing func...