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制作翻转效果_动力节点Java学院整理
Jul 11 HTML / CSS
CSS3教程(6):创建网站多列
Apr 02 HTML / CSS
CSS3中31种选择器使用方法教程
Dec 05 HTML / CSS
详解CSS3中使用gradient实现渐变效果的方法
Aug 18 HTML / CSS
css3 flex布局 justify-content:space-between 最后一行左对齐
Jan 02 HTML / CSS
教你如何一步一步用Canvas写一个贪吃蛇
Oct 22 HTML / CSS
html通过canvas转成base64的方法
Jul 18 HTML / CSS
只要五步 就可以用HTML5/CSS3快速制作便签贴特效(图)
Jun 04 HTML / CSS
让IE9以下版本的浏览器兼容HTML5的方法
Mar 12 HTML / CSS
Canvas中设置width与height的问题浅析
Nov 01 HTML / CSS
HTML5 Canvas实现放大镜效果示例
Mar 25 HTML / CSS
HTML页面滚动时部分内容位置固定不滚动的实现
Apr 14 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
php正则校验用户名介绍
2008/07/19 PHP
PHP连接MySQL数据的操作要点
2015/03/20 PHP
CI框架(ajax分页,全选,反选,不选,批量删除)完整代码详解
2016/11/01 PHP
PHP的自定义模板引擎
2017/03/24 PHP
Laravel框架分页实现方法分析
2018/06/12 PHP
php实现微信发红包功能
2018/07/13 PHP
在PHP中实现使用Guzzle执行POST和GET请求
2019/10/15 PHP
jQuery 源码分析笔记(3) Deferred机制
2011/06/19 Javascript
ExtJS判断IE浏览器类型的方法
2014/02/10 Javascript
js加入收藏夹代码(兼容ie/ff/op)
2014/05/16 Javascript
Jquery 返回json数据在IE浏览器中提示下载的问题
2014/05/18 Javascript
node.js读取文件到字符串的方法
2015/06/29 Javascript
jquery马赛克拼接翻转效果代码分享
2015/08/24 Javascript
JavaScript+canvas实现七色板效果实例
2016/02/18 Javascript
基于Javascript实现返回顶部按钮
2016/02/29 Javascript
基于JS实现EOS隐藏错误提示层代码
2016/04/25 Javascript
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
2017/04/28 jQuery
vue实现重置表单信息为空的方法
2018/09/29 Javascript
nodejs同步调用获取mysql数据时遇到的大坑
2019/03/02 NodeJs
自定义Vue组件打包、发布到npm及使用教程
2019/05/22 Javascript
VUE写一个简单的表格实例
2019/08/06 Javascript
[02:05]2014DOTA2西雅图国际邀请赛 BBC第二天小组赛总结
2014/07/11 DOTA
Python中实现的RC4算法
2015/02/14 Python
Python编程入门的一些基本知识
2015/05/13 Python
ubuntu17.4下为python和python3装上pip的方法
2018/06/12 Python
python利用Opencv实现人脸识别功能
2019/04/25 Python
基于MATLAB和Python实现MFCC特征参数提取
2019/08/13 Python
Python插件机制实现详解
2020/05/04 Python
通过Python扫描代码关键字并进行预警的实现方法
2020/05/24 Python
加热夹克:RAVEAN
2018/10/19 全球购物
幼儿园教师请假制度
2014/01/16 职场文书
小班开学寄语
2014/04/04 职场文书
残疾人小组计划书
2014/04/27 职场文书
2014年房地产个人工作总结
2014/12/20 职场文书
2015年普法依法治理工作总结
2015/05/26 职场文书
DE1107机评
2022/04/05 无线电