前一陣在園子裡看到一篇文章《基於css3仿造window7的開始選單》，文中僅使用css3 實現了windows 7 開始選單的動態效果，很久以來一直被wpf/silverlight 山上的風景所吸引，未成想其他的山也同樣引人入勝。於是心血來潮也嘗試著做了乙個windows 7 桌面效果，先來看幾張截圖吧。
桌面程式滑鼠hover 效果：
工作列程式滑鼠hover 效果：
開始選單效果：
桌面程式圖示
桌面背景及程式圖示的結構如下：
複製**
**如下:
在桌面中加入背景：
複製**
**如下:
#win
為桌面應用圖示新增滑鼠hover 動態效果，text-shadow 用來設定應用程式文字陰影效果，-webkit-border-radius 可設定邊框圓角：
#app
#app a
#app a:hover
工作列程式圖示
下面是工作列結構的html**：
複製**
**如下:
首先來看看開始選單圖示如何設定，通過hover 操作變換start.bmp 顯示位置，達到圖示發亮效果。
複製**
**如下:
#taskbar #start
#taskbar #start:hover
工作列背景通過taskbarbg.png 實現，其他圖示hover 效果通過改變taskbarhover.png 位置實現圖示下方高亮效果。
複製**
**如下:
#taskbar
#taskbar img
#taskbar a
#taskbar a:hover
開始選單
對於開始選單的設定可以參考之前提到的那篇文章，本篇在其基礎上新增了選單分割線及透明效果。
複製**
**如下:
程式設計客棧"programs">
&www.cppcns.comlt;li>
microsoft media center
程式設計客棧
開始選單通過opacity 設定其透明度：
複製**
**如下:
#startmenu
通過jquery（common.js） 完成開始選單開啟/關閉效果
複製**
**如下:
$(document).ready(function () );
$("#win").click(function () );
$("#desktop").click(function () );
});
源****
請使用chrome 瀏覽
本文標題: html+css3 模仿windows7 桌面效果
本文位址:
HTML CSS3陰影屬性
css3陰影 1 文字陰影屬性 text shadow 10px 10px 10px red 注 第乙個值 水平方向的距離 必須有的 支援負值 第二個值 垂直方向的距離 必須有的 支援負值 第三個值 陰影的模糊程度 不支援負值 第四個值 陰影的顏色 第乙個值 和 第二個值得位置不能互換 例 span...
html css3實現長方體效果
網上大都是正方體的效果，由於做乙個東西需要，寫了乙個html css3實現的長方體，有需要的也可以看看。2017 07 25 21 30 23 html 1 doctype html 2 html lang en 3 head 4 meta charset utf 8 5 title html cs...
前端面試題HTML CSS3
一 優先順序就近原則，同權重情況下以最近者為準 優先順序為 important id class tag important 比 內聯優先順序高 css3 新增偽類 first child 選擇屬於其父元素的首個元素。last child 選擇屬於其父元素的最後乙個元素。only child 選擇屬...