HTML5 canvas逼真的液体融合动画特效

这是一款使用HTML5 canvas和javascript制作的非常逼真的液体融合动画特效。该特效会随机生成一些液体物质,并随机生成颜色。这些液体物质会不断的进行融合,也可以使用鼠标来和这些液体进行交互。

制作方法

HTML结构

该液体融合动画特效使用一个<canvas>来制作。

<canvas id= "c"> </canvas>  
              

液体融合特效-1

液体融合特效-2

CSS样式

特效中的CSS样式比较简单,画布设置为固定宽度和高度,并居中对齐。

#c {
  width:800px;
  height:376px;
  margin:0 auto;
  display:block;
}                
              

其它的都是一些常规设置。

液体的生成和融合效果是在js代码中完成的,具体代码请参考下载文件。

在线预览    源码下载

爱编程-编程爱好者经验分享平台
版权所有 爱编程 © Copyright 2012. All Rights Reserved.
闽ICP备12017094号-3