HTML+CSS3 效仿Windows7 桌面上实际效果

日期:2021-03-13 类型:科技新闻 

关键词:商城网站建设,微商好助手,微商引流,电商网站模板,微信商家小程序

前1阵在园区里看到1篇文章内容《根据css3仿制window7的刚开始菜单》,文中仅应用CSS3 完成了Windows 7 刚开始菜单的动态性实际效果,很久以来1直被WPF/Silverlight 山上的景色所吸引住,未成想别的的山也一样扣人心弦。因而心力来潮也尝试着做了1个Windows 7 桌面上实际效果,先看来几张截图吧。

桌面上程序流程电脑鼠标Hover 实际效果:

每日任务栏程序流程电脑鼠标Hover 实际效果:

刚开始菜单实际效果:

 
桌面上程序流程标志
桌面上情况及程序流程标志的构造以下:

拷贝编码
编码以下:

<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: ⑴5px 0 0 ⑶0px;
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="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 ⑹px no-repeat;
}
#taskbar #start:hover
{
text-decoration: none;
background-position: 0 ⑴14px;
}

           
每日任务栏情况根据taskbarbg.png 完成,别的标志Hover 实际效果根据更改taskbarhover.png 照片部位完成标志正下方高亮度实际效果。

拷贝编码
编码以下:

#taskbar
{
height: 42px;
width: 880px;
margin: ⑷2px 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 ⑷6px no-repeat;
}
#taskbar a:hover
{
background-position: 0 ⑶px;
}


刚开始菜单
针对刚开始菜单的设定能够参照以前提到的那篇文章内容,本篇在其基本上加上了菜单切分线及全透明实际效果。

拷贝编码
编码以下:

<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>

 
刚开始菜单根据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 访问