首 页最新软件下载排行文章资讯投稿发布下载专题
维维下载站
您的位置:首页编程开发编程其它 → html5基于WebGL鼠标hover图像变形特效示例代码

html5基于WebGL鼠标hover图像变形特效示例代码

日期:2018-6-4 7:20:00 平台:Winall 体积:2.63 MB

html5基于WebGL鼠标hover图像变形特效例子代码绿色下载,这个特殊效果代码是一个基于WebGL的鼠标悬停图像转换特效源代码。当鼠标移动到图片上时,效果通过切换不同的图片和三个.js动画效果,产生图像失真和动画效果。非常酷,这个特效的动画是基于WebGL技术和three.js创建的,支持WebGL浏览器。

使用说明:

在这个效果演示中,使用了CSS变量。请使用支持CSS变量的浏览器来查看此DEMO。这个基于WebGL的鼠标悬停图像转换特效的工作主要有以下3个步骤:

1.用中间图案替换原始图像。

2.在两张图像上使用淡入淡出效果。

3.反转图像。

中间图案是一些黑色和白色的纹理图案。

鼠标悬停图像失真效果

这个基于WebGL的鼠标悬停图像变形效果的github地址。

相关下载
栏目导航
本类热门阅览