css 图标点击变色,纯CSS实现小图标变色的一些研究

  • Post author:
  • Post category:其他


by zhangxinxu from www.zhangxinxu.com/wordpress/?…

本文可全文转载,个人网站无需授权,只要保留原作者、出处以及文中链接即可,任何网站均可摘要聚合,商用请联系授权。

一、把Canvas图片作为CSS背景图片

CSS Paint API可以简单理解为(实际不能等同)把Canvas画布作为普通元素的背景图片。

也就是CSS的background-image就是一个Canvas,我们可以利用Canvas绝大多数API绘制各种复杂有趣的图形效果,以一种更高效的方式丰富web页面元素的视觉展现。例如,蓝色按钮不仅仅是个蓝色背景,上面还有白云漂漂的效果,想想就很棒!

二、一个简单的案例了解CSS Paint API

例如,我们希望创建一个透明图片背景。类似下面这样:

则完整的CSS代码和JS部分代码如下:

.box {

width: 180px; height: 180px;

/* transparent-grid自己命名 */

background-image: paint(transparent-grid);

}复制代码

然后绘制图形的JS务必作为模块引入,例如,建一个名为paint-grid.js的文件,在页面上引入:

if (window.CSS) {

CSS.paintWorklet.addModule(‘paint-grid.js’);

}复制代码

paint-grid.js文件代码如下:

// transparent-grid命名和CSS中的对应

registerPaint(‘transparent-grid’, class {

paint(context, size) {

// 这里就是绘制的代码了….

}

});复制代码

以上就是CSS Paint API使用的固定套路:

CSS中paint(abc);

JS添加模块CSS.paintWorklet.addModule(‘xxx.js’);

xxx.js中代码套路固定,在下面注释位置写绘制代码即可;

registerPaint(‘abc’, class {

paint(context, size, properties) {

// 绘制代码在这里….

}

});复制代码

其中paint(context, size)中的两个参数可以稍微介绍下:

context

为绘制上下文,全称是PaintRenderingContext2D,和Canvas的CanvasRenderingContext2D是近亲,API全部来自Canvas,一模一样,不过由于安全限制&