手机
当前位置:查字典教程网 >网页设计 >交互设计教程 >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 桌面效果】相关文章:

值得每个设计师阅读思考的深度剖析文

16个版式设计出色抢眼的优秀网站

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

你的用户体验过关吗?检查3个关键要素就知道

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

购物网站设计方法与注意事项

交互设计师职场必读书《破茧成蝶》

STARTUP FRAMEWORK搞定的优秀网页设计

15例运用插图的网页设计案例赏析

打造一款热门手游的几个技巧

精品推荐
分类导航