一个非常有趣的前端设计实验，可以通过从调色板拖放色彩水滴来渲染页面元素。
今天我们将和你分享一个有趣的交互式染色概念。这个设计理念就是简单地从调色板拖放色彩水滴到需要染色的页面内容区域。你可能之前使用过可自定义的工具，但是，我们是想在这个基础上增加一些有趣的东西，使用它更有乐趣地被使用。
如何使用它：你可以从调色板拖曳一个颜色放到由蓝色轮廓包围的区域，包括文本元素。一旦你拖放了一个色彩水滴到某个区域，一个有趣的染色动画以一个圆形随之扩散开来，渲染整个选定的区域。为了设计这个效果，我们使用了SVG元素来实现色彩圆形的扩散并结合使用CSS来过渡消退。
你可以点击调色板工具条上的液滴图标来重置所有的颜色。
为了实现色彩拖放功能，我们使用了绚丽的 interact.js 库。
注意这只是一个实验性的且只支持现代浏览器的效果，IE浏览器不支持SVG元素过渡，所以在IE浏览器上不能看到色圈扩散的效果。
扫一扫
381
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
