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

2022-03-02 19:49:29 字數 637 閱讀 8694

效果圖:

效果是不是還是很不錯的,最主要的是沒有使用一行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檔案:

margin: 0;

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中存放大圖...

初學HTML5 CSS3動畫

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