手机
当前位置:查字典教程网 >网页设计 >交互设计教程 >HTML+CSS 模仿Windows 7 桌面效果
HTML+CSS 模仿Windows 7 桌面效果
摘要:前一阵看到一篇文章《使用css3仿造window7的开始菜单》,文中仅使用CSS3实现了Windows7开始菜单的动态效果,很久以来一直被W...

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

桌面程序鼠标Hover 效果:

HTML+CSS 模仿Windows 7 桌面效果1

任务栏程序鼠标Hover 效果:

HTML+CSS 模仿Windows 7 桌面效果2

开始菜单效果:

HTML+CSS 模仿Windows 7 桌面效果3

桌面程序图标

桌面背景及程序图标的结构如下:

<div id="win">
    <ul id="app">
        <li>
<
a href="#"> <img src="images/computer.png"><br /> Computer</a>
</
li> <li>
<
a href="#"> <img src="images/recycle.png"><br /> Recycle Bin</a>
</
li> <li>
<
a href="#"> <img src="images/network.png"><br /> Network</a>
</
li> </ul> </div>

【HTML+CSS 模仿Windows 7 桌面效果】相关文章:

教你如何让界面动画自然流畅

网页设计中巧妙运用圆形让你策马奔腾

网站设计主题和风格是重点

完美的用户体验设计从何而来?

品牌网站设计过程分享

浅析网页色彩搭配的内涵

游戏设计师需知的10个用户真相

16个超酷炫的国外游戏网页设计欣赏

应该知道的UI动态设计规则

图标是空心好还是实心好?

精品推荐
分类导航