桌面程序鼠标Hover 效果:
任务栏程序鼠标Hover 效果:
开始菜单效果:
桌面程序图标
桌面背景及程序图标的结构如下:
复制代码代码如下:
<div id="win">
<ul id="app">
<li> <a href="#">
<img src="/UploadFiles/2021-03-30/computer.png">
Computer</a> </li>
<li> <a href="#">
<img src="/UploadFiles/2021-03-30/recycle.png">
Recycle Bin</a> </li>
<li> <a href="#">
<img src="/UploadFiles/2021-03-30/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代码:
复制代码代码如下:
<div id="taskbar">
<a href="#" id="start"></a>
<a href="#" style="left: 60px">
<img src="/UploadFiles/2021-03-30/ie.png"></a> <a href="#" style="left: 120px">
<img src="/UploadFiles/2021-03-30/library.png"></a> <a href="#" style="left: 180px">
<img src="/UploadFiles/2021-03-30/mp.png"></a> <a href="#" style="left: 240px">
<img src="/UploadFiles/2021-03-30/live.png"></a> <a href="#" style="left: 300px">
<img src="/UploadFiles/2021-03-30/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;
}
任务栏背景通过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="/UploadFiles/2021-03-30/ie.png"><li><a href="#">
<img src="images/mc.png"><li> <div id="leftspliter"></div></li>
<li><a href="#">
<img src="/UploadFiles/2021-03-30/word.png"><li><a href="#">
<img src="images/excel.png"><li><a href="#">
<img src="/UploadFiles/2021-03-30/powerpoint.png"><li><a href="#">
<img src="images/access.png"><li><a href="#">
<img src="/UploadFiles/2021-03-30/update.png"><li>
<div id="leftspliter"></div></li>
<li><a href="#">
<img src="/UploadFiles/2021-03-30/narrow.png"><li>
<img id="search" src="images/search.png"></ul>
<ul id="links">
<li class="icon"><img src="/UploadFiles/2021-03-30/user.png"><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>
开始菜单通过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));
}
通过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 浏览
CSS3,Windows7,桌面
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
更新日志
- 群星《前途海量 电影原声专辑》[FLAC/分轨][227.78MB]
- 张信哲.1992-知道新曲与精丫巨石】【WAV+CUE】
- 王翠玲.1995-ANGEL【新艺宝】【WAV+CUE】
- 景冈山.1996-我的眼里只有你【大地唱片】【WAV+CUE】
- 群星《八戒 电影原声带》[320K/MP3][188.97MB]
- 群星《我的阿勒泰 影视原声带》[320K/MP3][139.47MB]
- 纪钧瀚《胎教古典音乐 钢琴与大提琴的沉浸时光》[320K/MP3][148.91MB]
- 刘雅丽.2001-丽花皇后·EMI精选王【EMI百代】【FLAC分轨】
- 齐秦.1994-黄金十年1981-1990CHINA.TOUR.LIVE精丫上华】【WAV+CUE】
- 群星.2008-本色·百代音乐人创作专辑【EMI百代】【WAV+CUE】
- 群星.2001-同步过冬AVCD【环球】【WAV+CUE】
- 群星.2020-同步过冬2020冀待晴空【环球】【WAV+CUE】
- 沈雁.1986-四季(2012梦田复刻版)【白云唱片】【WAV+CUE】
- 纪钧瀚《胎教古典音乐 钢琴与大提琴的沉浸时光》[FLAC/分轨][257.88MB]
- 《国语老歌 怀旧篇 3CD》[WAV/分轨][1.6GB]