好久好久好久没有更新博客文章了，这篇也是好久好久好久前写的了，本来打算发布到某个官网发，不过审核没过...亏我还连夜设计了一个吊爆的造型做成Banner，TNND，以后有东西直接发，投个鬼稿...下面是我传说中的Banner:



蝙蝠侠套装 给力吧...啊哈哈...还是进入正题，说说这篇文章吧：

自从接手好莱坞影院到发版(前阵子已经更新多一版了 T.T )，除了完成页面重构、项目需求外，重构的同志们融入CSS3丰富页面细节，针对Firefox、Chrome、Safari等现代浏览器，通过交互动画活跃页面，提高趣味性与用户体验，主要体现在过渡transition，动画animation，响应鼠标操作来实现。

以下提供了一些好莱坞影院项目中的CSS3实例，分别对普通实现跟融入CSS3后的效果做比较：

 

 

一、幻灯片tab切换 (支付首页)

1）普通实现

2）CSS3实现

 

CSS3效果 鼠标滑过，缩略图向上移动，上方小角标上下线性移动，鼠标滑出，缩略图回归原位，小角标默认静止。

二、输入框输入状态切换 (支付首页)

1）普通实现

2）CSS3实现

CSS3效果 输入框获得焦点，输入框宽度逐渐变长，底色由暗提亮，放大镜搜索浅色icon动画替换为深色icon。

 

三、强档推荐 hover状态 (支付首页)

 

1）普通实现

2）CSS3实现

CSS3效果 鼠标滑过，右上角角标向右滑出，完全显示，鼠标滑出则滑回。

四、特色影厅 hover状态 (支付首页)

1）普通实现

2）CSS3实现

CSS3效果 鼠标滑过，片名左侧icon渐宽，上方滑出半透明详细内容。

五、下周即将推出 hover状态 (支付首页、免费区、五折区)

1）普通实现

2）CSS3实现

css3效果 鼠标滑过影片项，播放按钮会渐显，当鼠标滑过播放按钮，按钮会响应的心跳的动态效果；

鼠标滑过 关注 按钮，按钮颜色加深，点击 关注 ，会从左侧滑出打勾icon，右侧滑出 取消 字样；

按钮状态为 已关注，打勾icon 默认显示，点击 取消 字样后，icon 跟取消同时滑入消失，按钮还原成 关注 状态。

六、在线客服 hover状态 (支付首页)

1）普通实现

2）CSS3实现

CSS3效果 鼠标滑过在线客服 小企鹅icon 小企鹅会跳一跳

七、确定购买按钮 hover状态 (支付页面)

1）普通实现

2）CSS3实现

CSS3效果 鼠标滑过 按钮散发出淡蓝色光芒，滑出时收敛。

八、收藏icon hover状态 (播放页面)

1）普通实现

2）CSS3实现

CSS3效果 鼠标滑过 心形描边icon 滑动 替换为 心形填满icon
 

九、点播按钮 hover状态 (播放页面)

CSS3效果 鼠标滑过按钮 按钮周边光芒持续散发收敛，同时，有高亮闪光从左上至右下掠过。(同图六)
 
十、已选择按钮 hover active状态 (全部影片)

1）普通实现

2）CSS3实现

CSS3效果 鼠标滑过，灰色“X”滑动替换为红色“X”，文字由灰色变红，按钮投影变深扩散，当鼠标点击，按钮下移，同时按钮投影收缩变小，视觉上就像是按钮给“按下”了
 

十一、清空已选 icon hover状态 (全部影片)

CSS3效果 鼠标滑过，清空已选 垃圾桶icon桶盖会打开，类似于iphone删除照片时，右下角的垃圾桶效果。(同图八)
 

十二、分页 icon按钮hover状态 (全部影片)

1）普通实现

2）CSS3实现

CSS3效果 鼠标滑过分页按钮，按钮以三重内投影实现内陷效果。

十三、专区幻灯片 hover状态 (会员免费区、会员五折区)

 

1）普通实现

2）CSS3实现

CSS3效果 鼠标滑过幻灯片，播放按钮渐显，当鼠标滑过播放按钮，按钮会响应的心跳的动态效果；

同时幻灯片详情会从底部向上延伸，背景颜色加深，鼠标滑出，恢复原状态；

 

十四、加入会员 hover状态 (支付成功页面)

 

1）普通实现

2）CSS3实现

CSS3效果 鼠标滑过标签，标签向上抽出，滑出则收回。

感谢大家支持...最近感觉相对闲了一些，我泡下技术论坛，看有没有什么新创意出来分享给大家...