之前在研究一个有关 利用纯css完成感知悬停 的代码,在里面第一次见到了 will-change
属性(学识疏浅勿喷-=-),查资料看了一下张鑫旭大大的博客 使用CSS3 will-change提高页面滚动、动画等渲染性能 对这个属性肃然起敬(相遇恨晚,抱头痛哭.jpg)。
今天看见了一个利用纯css制作的感知悬停,示例页面 做出了和百度图片一样的悬停效果,而且跟吸引我的是用的是纯css,虽然我不知道百度图片用的是什么方法,但是对于一个 能用css就别用js
主义者的我当然是引起了极大的兴趣~
话不多说先看看页面的源码去分析一下~
今天在看到 3D轨道分割图像 这个示例的时候起初没有在意图片背后的悬浮动画,觉得这个只是加载了一张图片然后分成4块,hover上去的时候就合并在一起,就是4块图片的transition-delay不同,后来看着看着发现其实4块图片整体是有一个3D浮动的动画,而且当我hover上去的时候不管现在整体悬浮到那个位置都会顺滑的回到平面,勾起了我的好奇心。