HTML5 CSS3專題 純CSS打造相簿效果

效果圖：

效果是不是還是非常不錯的。最基本的是沒有使用一行js。這才是亮點。

先看html檔案：

1、ul 中 li決定了**的個數

2、ul使用樣式float:right。width:140px;使得顯示在相簿的右側區域

3、li的float：left，使得li能夠左浮動。li中存放大圖的div，position為absolute會依據div#gallary進行定位。預設僅僅有第乙個顯示

4、當滑鼠移動到li上時。改變li span img的透明度和li div的display將大圖顯示

接下來就是css檔案：

padding: 0;

font-size: 100%;

border: 0;

outline: 0;

background: transparent; }

ol, ul

blockquote, q

:focus

table

HTML5 CSS3專題 純CSS打造相簿效果

效果圖 效果是不是還是很不錯的，最主要的是沒有使用一行js，這才是亮點。先看html檔案 簡單描述一下 1 ul 中 li決定了 的個數 2 ul使用樣式float right，width 140px 使得顯示在相簿的右側區域 3 li的float left，使得li可以左浮動 li中存放大圖的di...

HTML5 CSS3專題 純CSS打造相簿效果

效果圖 效果是不是還是很不錯的，最主要的是沒有使用一行js，這才是亮點。先看html檔案 簡單描述一下 1 ul 中 li決定了 的個數 2 ul使用樣式float right，width 140px 使得顯示在相簿的右側區域 3 li的float left，使得li可以左浮動 li中存放大圖的di...

初學HTML5 CSS3動畫

乙個完整的css animations由兩部分構成 在css3中使用 keyframes規則來建立動畫，keyframes可以設定多個關鍵幀，每個關鍵幀表示動畫過程中的乙個狀態，多個關鍵幀就可以使動畫十分絢麗。keyframes animationname animation屬性用於描述動畫的css...