HTML+CSS3 模仿Windows7 桌面效果


Posted in HTML / CSS onJune 17, 2010

前一阵在园子里看到一篇文章《基于css3仿造window7的开始菜单》,文中仅使用CSS3 实现了Windows 7 开始菜单的动态效果,很久以来一直被WPF/Silverlight 山上的风景所吸引,未成想其他的山也同样引人入胜。于是心血来潮也尝试着做了一个Windows 7 桌面效果,先来看几张截图吧。

桌面程序鼠标Hover 效果:

HTML+CSS3 模仿Windows7 桌面效果

任务栏程序鼠标Hover 效果:

HTML+CSS3 模仿Windows7 桌面效果

开始菜单效果:

HTML+CSS3 模仿Windows7 桌面效果 
桌面程序图标
桌面背景及程序图标的结构如下:

复制代码
代码如下:

<div id="win">
<ul id="app">
<li> <a href="#">
<img src="images/computer.png">

Computer</a> </li>
<li> <a href="#">
<img src="images/recycle.png">

Recycle Bin</a> </li>
<li> <a href="#">
<img src="images/network.png">

Network</a> </li>
</ul>
</div>


在桌面<div>中加入背景图片:
复制代码
代码如下:

#win
{
background-image: url(images/win7bg.jpg);
background-position: center;
width: 880px;
height: 550px;
border: #ffffff 1px solid;
} 为桌面应用图标添加鼠标Hover 动态效果,text-shadow 用来设置应用程序文字阴影效果,-webkit-border-radius 可设置边框圆角:
#app
{
float: left;
text-align: center;
margin: -15px 0 0 -30px;
list-style: none;
}
#app a
{
text-decoration: none;
border: solid 1px transparent;
display: block;
padding: 3px;
margin: 20px 0 0 0;
color: #ffffff;
text-shadow: 0.2em 0.1em 0.3em #000000;
}
#app a:hover
{
border: solid 1px #bbd6ec;
-webkit-border-radius: 3px;
box-shadow: inset 0 0 1px #fff;
-webkit-box-shadow: inset 0 0 1px #fff;
background-color: #5caae8;
}

任务栏程序图标
HTML+CSS3 模仿Windows7 桌面效果    HTML+CSS3 模仿Windows7 桌面效果
下面是任务栏结构的HTML代码:
复制代码
代码如下:

<div id="taskbar">
<a href="#" id="start"></a>
<a href="#" style="left: 60px">
<img src="images/ie.png" />
</a> <a href="#" style="left: 120px">
<img src="images/library.png" />
</a> <a href="#" style="left: 180px">
<img src="images/mp.png" />
</a> <a href="#" style="left: 240px">
<img src="images/live.png" />
</a> <a href="#" style="left: 300px">
<img src="images/outlook.png" />
</a>
<div id="desktop"></div>
</div>

首先来看看开始菜单图标如何设置,通过Hover 操作变换start.bmp 显示位置,达到图标发亮效果。
复制代码
代码如下:

#taskbar #start
{
position: absolute;
text-align: center;
width: 57px;
height: 46px;
background: url(images/start.bmp) 0 -6px no-repeat;
}
#taskbar #start:hover
{
text-decoration: none;
background-position: 0 -114px;
}

HTML+CSS3 模仿Windows7 桌面效果      HTML+CSS3 模仿Windows7 桌面效果      HTML+CSS3 模仿Windows7 桌面效果
任务栏背景通过taskbarbg.png 实现,其他图标Hover 效果通过改变taskbarhover.png 图片位置实现图标下方高亮效果。
复制代码
代码如下:

#taskbar
{
height: 42px;
width: 880px;
margin: -42px 0 0 1px;
background: url(images/taskbarbg.png) no-repeat;
}
#taskbar img
{
margin: 5px 0 0 0;
width: 30px;
height: 29px;
}
#taskbar a
{
position: absolute;
text-align: center;
width: 57px;
height: 46px;
background: url(images/taskbarhover.png) 0 -46px no-repeat;
}
#taskbar a:hover
{
background-position: 0 -3px;
}

开始菜单
对于开始菜单的设置可以参考之前提到的那篇文章,本篇在其基础上添加了菜单分割线及透明效果。

复制代码
代码如下:

<div id="menuwin">
<div id="startmenu"></div>
<ul id="programs">
<li><a href="#">
<img src="images/ie.png" />Internet Explorer</a></li>
<li><a href="#">
<img src="images/mc.png" />Microsoft Media Center</a></li>
<li> <div id="leftspliter"></div></li>
<li><a href="#">
<img src="images/word.png" />Microsoft Word 2010</a></li>
<li><a href="#">
<img src="images/excel.png" />Microsoft Excel 2010</a></li>
<li><a href="#">
<img src="images/powerpoint.png" />Microsoft PowerPoint 2010</a></li>
<li><a href="#">
<img src="images/access.png" />Microsoft Access 2010</a></li>
<li><a href="#">
<img src="images/update.png" />Windows Update</a></li>
<li>
<div id="leftspliter"></div></li>
<li><a href="#">
<img src="images/narrow.png" />All Programs</a></li>
<li>
<img id="search" src="images/search.png" /></li>
</ul>
<ul id="links">
<li class="icon"><img src="images/user.png" /></li>
<li><a href="#"><span>Documents</span></a></li>
<li><a href="#"><span>Pictures</span></a></li>
<li><a href="#"><span>Music</span></a></li>
<li><div id="rightspliter"></div></li>
<li><a href="#"><span>Games</span></a></li>
<li><a href="#"><span>Computer</span></a></li>
<li><div id="rightspliter"></div></li>
<li><a href="#"><span>Control Panel</span></a></li>
<li><a href="#"><span>Devices and Printers</span></a></li>
<li><a href="#"><span>Default Programs</span></a></li>
</ul>
</div>

HTML+CSS3 模仿Windows7 桌面效果 
开始菜单通过opacity 设置其透明度:
复制代码
代码如下:

#startmenu
{
border: solid 1px #102a3e;
overflow: visible;
display: block;
float: left;
height: 404px;
width: 400px;
opacity: 0.9;
-webkit-border-radius: 5px;
position: absolute;
box-shadow: inset 0 0 1px #ffffff;
-webkit-box-shadow: inset 0 0 1px #ffffff;
background-color: #619bb9;
background: -webkit-gradient(linear, center top, center bottom, from(#327aa4),color-stop(45%, #2e4b5a), to(#5cb0dc));
}

HTML+CSS3 模仿Windows7 桌面效果

HTML+CSS3 模仿Windows7 桌面效果

通过jQuery(common.js) 完成开始菜单打开/关闭效果

复制代码
代码如下:

$(document).ready(function () {
$("#start").click(function () {
$("#menuwin").css("display", "block");
});
$("#win").click(function () {
$("#menuwin").css("display", "none");
});
$("#desktop").click(function () {
$("#menuwin").css("display", "none");
});
});

源代码下载
请使用Chrome 浏览
HTML / CSS 相关文章推荐
CSS3新属性transition-property transform box-shadow实例学习
Jun 06 HTML / CSS
利用纯css3实现的文字亮光特效的代码演示
Nov 27 HTML / CSS
一款纯css3实现的竖形二级导航的实例教程
Dec 11 HTML / CSS
CSS3实现曲线阴影和翘边阴影
May 03 HTML / CSS
css3实现文字首尾衔接跑马灯的示例代码
Oct 16 HTML / CSS
纯CSS3实现的井字棋游戏
Nov 25 HTML / CSS
html5 Canvas画图教程(5)—canvas里画曲线之arc方法
Jan 09 HTML / CSS
html5新增的属性和废除的属性简要概述
Feb 20 HTML / CSS
在HTML5 Canvas中放入图片和保存为图片的方法
May 03 HTML / CSS
HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题
Apr 27 HTML / CSS
AmazeUI 网格的实现示例
Aug 13 HTML / CSS
HTML怎么设置下划线?html文字加下划线方法
Dec 06 HTML / CSS
基于css3仿造window7的开始菜单
Jun 17 #HTML / CSS
css3.0新属性效果在ie下的解决方案
May 10 #HTML / CSS
CSS3 开发工具收集
Apr 17 #HTML / CSS
收集的7个CSS3代码生成工具
Apr 17 #HTML / CSS
各大浏览器 CSS3 和 HTML5 兼容速查表 图文
Apr 01 #HTML / CSS
CSS3 please 跨浏览器的CSS3产生器
Mar 14 #HTML / CSS
CSS3 简单又实用的5个属性
Mar 04 #HTML / CSS
You might like
FCKeditor的安装(PHP)
2007/01/13 PHP
file_get_contents(&quot;php://input&quot;, &quot;r&quot;)实例介绍
2013/07/01 PHP
PHP实现网站访问量计数器
2017/10/27 PHP
Linux下安装Memcached服务器和客户端与PHP使用示例
2019/04/15 PHP
关于JavaScript的gzip静态压缩方法
2007/01/05 Javascript
javascript 面向对象的JavaScript类
2010/05/04 Javascript
超级24小时弹窗代码 24小时退出弹窗代码 100%弹窗代码(IE only)
2010/06/11 Javascript
js 获取屏幕各种宽高的方法(浏览器兼容)
2013/05/15 Javascript
JS实现随机数生成算法示例代码
2013/08/08 Javascript
jQuery打印指定区域Html页面并自动分页
2014/07/04 Javascript
更快的异步执行(setTimeout多浏览器)
2014/08/12 Javascript
微信JS接口汇总及使用详解
2015/01/09 Javascript
jQuery使用before()和after()在元素前后添加内容的方法
2015/03/26 Javascript
深入理解JavaScript内置函数
2016/06/03 Javascript
Angularjs的ng-repeat中去除重复数据的方法
2016/08/05 Javascript
Angular懒加载机制刷新后无法回退的快速解决方法
2016/08/30 Javascript
Json对象和字符串互相转换json数据拼接和JSON使用方式详细介绍(小结)
2016/10/25 Javascript
EditPlus 正则表达式 实战(3)
2016/12/15 Javascript
详解基于Vue+Koa的pm2配置
2017/10/24 Javascript
node.js基于express使用websocket的方法
2017/11/09 Javascript
微信小程序实现页面跳转传值以及获取值的方法分析
2017/12/18 Javascript
详解使用uni-app开发微信小程序之登录模块
2019/05/09 Javascript
在vue中动态修改css其中一个属性值操作
2020/12/07 Vue.js
Python批量按比例缩小图片脚本分享
2015/05/21 Python
python开发之str.format()用法实例分析
2016/02/22 Python
Python实现简单网页图片抓取完整代码实例
2017/12/15 Python
在python中获取div的文本内容并和想定结果进行对比详解
2019/01/02 Python
德国足球商店:OUTFITTER
2019/05/06 全球购物
师范生教师实习自我鉴定
2013/09/27 职场文书
小学先进集体事迹材料
2014/05/31 职场文书
鼓舞士气的口号
2014/06/16 职场文书
竞聘演讲稿开场白
2014/08/25 职场文书
教师节寄语2015
2015/03/23 职场文书
《牧场之国》教学反思
2016/02/22 职场文书
读《钢铁是怎样炼成的》有感:百炼方成钢
2019/11/05 职场文书
MySQL RC事务隔离的实现
2022/03/31 MySQL