完整CSS代码及JS代码如下：
.ripple {
width: 100px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
border: none;
font-size: 16px;
border-radius: 6px;
background-color: rgb(64 179 255);
--ripple-x: 0;
--ripple-y: 0;
--animation-tick: 0;
}
/* 点击后增加的动画效果 */
.ripple.animating {
background-image: paint(ripple);
}
HTML 代码如下：
【CSS Houdini】绘制图形JS需要以模块引入，CSS.paintWorklet.addModule 能让 web 引入 ripple.js 这个脚本，并另外开辟线程执行。它不会影响主线程，这是 worklet 的重要“卖点”！
ripple.js代码如下：
registerPaint('ripple', class {
paint(ctx, geom, properties) {
// 像写canvas一样绘制动画}
});
以上就是 CSS Paint API 大概的使用方式，先总结下：
CSS 中使用 paint 方法
JS 添加绘制代码脚本
ripple.js 中像写 Canvas 一样绘制图形推荐阅读
- web网页模板|如此优秀的JS轮播图，写完老师都沉默了
- JavaScript|JavaScript之DOM增删改查(重点)
- 网络|一文彻底搞懂前端监控
- css|我用css精灵图拼接了自己的英文名字，不会还有人不知道精灵图技术吧（）
- css|css三角的做法及其案例
- css|css中元素的显示与隐藏
- JavaWeb|JavaWeb学习——CSS
- flex|C语言-使用goto语句从循环中跳出
- java|你跳一次涨多少（今天见识到跳槽天花板！！）