交互式拖放色彩渲染效果

一个很是有趣的前端设计实验，能够经过从调色板拖放色彩水滴来渲染页面元素。

在线演示

今天咱们将和你分享一个有趣的交互式染色概念。这个设计理念就是简单地从调色板拖放色彩水滴到须要染色的页面内容区域。你可能以前使用过可自定义的工具，可是，咱们是想在这个基础上增长一些有趣的东西，使用它更有乐趣地被使用。

如何使用它：你能够从调色板拖曳一个颜色放到由蓝色轮廓包围的区域，包括文本元素。一旦你拖放了一个色彩水滴到某个区域，一个有趣的染色动画以一个圆形随之扩散开来，渲染整个选定的区域。为了设计这个效果，咱们使用了SVG元素来实现色彩圆形的扩散并结合使用CSS来过渡消退。

你能够点击调色板工具条上的液滴图标来重置全部的颜色。

为了实现色彩拖放功能，咱们使用了绚丽的 interact.js 库。

注意这只是一个实验性的且只支持现代浏览器的效果，IE浏览器不支持SVG元素过渡，因此在IE浏览器上不能看到色圈扩散的效果。

在线演示