css 色盘、饼图、色轮

1.应要求要实现一个色盘取色器。
css 色盘、饼图、色轮_第1张图片
2.四处寻找无果,只能用图片实现了。
3.看书《揭秘css》时,发现了css的新属性,分享出来。

background: conic-gradient(red,yellow,lime,aqua,blue,fuchsia,red);

4.就这样实现了这个色盘,但是因为是新属性,有兼容性问题,使用的话要多调试。
5.当然要取色就要使用监听鼠标位置的属性,通过位置计算出角度和距离圆心的距离,就可以通过公式计算出颜色。用到了三角函数,后面优化后会贴出来。

你可能感兴趣的:(css 色盘、饼图、色轮)