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

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

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

设计出迷人的响应式网页技巧

STARTUP FRAMEWORK搞定的优秀网页设计

帮帮忙吧,我们准备年底上线!

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

品牌网站设计过程分享

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

视觉设计师怎样让前端100%实现设计效果?

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

精品推荐
分类导航