汇丰银行HSBC旋转动画设计

作者:林炜贤来源:www.163css.com发表时间:(2010-12-16)

这个动画是我的老板给我的,估计他非常喜欢汇丰银行的网站,曾经听他说经常拿汇丰的网站向建行的员工作介绍。红色调加灰色调,汇丰银行的网站让人感觉到了商业气息。我看的是英文版,可能跟我老板以前在英国留学过有关,他特别喜欢介绍国外的网站。

汇丰银行的网站有许多空白,估计这就是常说的留白。网站的主要内容位于左侧,右侧为导航类,估计这个跟人的鼠标移动习惯有关,通常鼠标是位于右侧开始。眼镜喜欢看左侧的主要内容。

说了半天,我要介绍的是动画如下:一共有六张图在转,360度的,你可以看到三张,两张是看到半边,一张是完整看到。下面有六个数字按钮还有两个前后控制按钮,图片翻转,数字也跟着转,够牛!在这里要提示下,由于采用了png图片,我惊讶地发现创作者采用的解决方案跟我以前提出的png背景处理是一致的,针对ie6多写了一些滤镜代码。

更让人佩服的是这个动画是自动的,其实我们平常见多了水平滚动的,现在见到360度翻转的就觉得好神奇,呵呵。

以下是我制作的效果截图:

精彩的东西还是看在线预览吧,呵呵。

以下我提供源文件,欢迎有需要的朋友下载使用:

预览地址:http://www.163css.com/hihilinxuan/cssjs/201012/hsbc/index.html

下载地址:汇丰银行HSBC旋转动画设计.rar

返回作者主页:www.163css.com阅读 (10879)
更多 1