在使用Google+的时候,查看某一相册,会经常看到,如下图所示的动画效果。

仿Google+相册的动画

鼠标移入、移出时均有动画效果,咋一看估计是使用了css3的transform属性来实现动画效果的。

在网上搜索“Google+ 相册 效果”的时候发现有人使用CSS3做了这样的效果,不过使用调试工具查看节点元素的时候,我觉得它是使用JS在进行的控制。所以就用JS顺手写了一个,只是demo,可能还需要改进。

实例暂时仅支持较新版本的:Chrome、Safari、Firefox、Opera(其中Safari动画感觉不太流畅,所有浏览器中Chrome表现最好),示例请使用上述浏览器进行访问,演示地址>>

代码旋转的坐标值都是写死的,而google+里应该是算出来的,这里没有引用其它的js库/框架,代码不算多,思路算比较简单的(有优化的空间,有空封装和折腾一下)。

完整的示例代码:

>

相关文章:

  • 2021-08-15
  • 2021-12-19
  • 2021-11-03
  • 2021-12-27
  • 2021-12-22
  • 2021-10-10
  • 2021-04-22
猜你喜欢
  • 2021-05-15
  • 2021-04-30
  • 2022-12-23
  • 2021-12-19
  • 2021-12-27
  • 2022-12-23
相关资源
相似解决方案