效果展示
在下面的图形上移动鼠标即可看到效果
需要用到的知识
代码部分
其实核心的逻辑和 React 关联性不大,只是我正好用 React 来做的,直接参考 https://jsfiddle.net/yunyuyuan123/ukqstdw6/95/,主要关注这几个部分:
- 使用
requestAnimationFrame
来保证动画过度的流畅性。 - 通过
translateZ
来控制 Z 轴的高度,从而实现层次感。 - 使用 CSS 新属性
will-change
来提升性能。
在下面的图形上移动鼠标即可看到效果
其实核心的逻辑和 React 关联性不大,只是我正好用 React 来做的,直接参考 https://jsfiddle.net/yunyuyuan123/ukqstdw6/95/,主要关注这几个部分:
requestAnimationFrame
来保证动画过度的流畅性。translateZ
来控制 Z 轴的高度,从而实现层次感。will-change
来提升性能。