如何用CSS编写水波纹效果的对号和错号图标？

创建CSS水波纹效果的对号和错号涉及到CSS的高级技巧，包括动画、形状绘制和伪元素的使用。以下是两种效果的大致实现方法：

对号（勾选）的水波纹效果
基本形状：使用::before和::after伪元素来创建对号的两条线段。

动画：使用@keyframes定义动画，让对号像水波纹一样逐渐展开。

应用动画和样式：将动画应用到伪元素上，并为容器元素添加适当的样式。

.checkmark {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: inline-block;
    position: relative;
}

.checkmark::before, .checkmark::after {
    content: '';
    position: absolute;
    background-color: green;
    border-radius: 2px;
}

.checkmark::before {
    top: 15px;
    left: 10px;
    width: 10px;
    height: 20px;
    transform: rotate(45deg);
    animation: checkmark-first-segment 0.3s ease forwards;
}

.checkmark::after {
    top: 15px;
    left: 20px;
    width: 20px;
    height: 10px;
    transform: rotate(-45deg);
    animation: checkmark-second-segment 0.3s ease forwards 0.3s;
}

@keyframes checkmark-first-segment {
    from { width: 0; }
    to { width: 10px; }
}

@keyframes checkmark-second-segment {
    from { width: 0; }
    to { width: 20px; }
}

错号（错误）的水波纹效果
基本形状：使用两个::before和::after伪元素创建一个“X”形状。

动画：定义动画使“X”的两条线段像水波纹一样逐渐展开。

应用动画和样式：

.crossmark {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: inline-block;
    position: relative;
}

.crossmark::before, .crossmark::after {
    content: '';
    position: absolute;
    top: 20px;
    left: 10px;
    background-color: red;
    border-radius: 2px;
}

.crossmark::before {
    width: 30px;
    height: 5px;
    transform: rotate(45deg);
    animation: cross-first-segment 0.3s ease forwards;
}

.crossmark::after {
    width: 30px;
    height: 5px;
    transform: rotate(-45deg);
    animation: cross-second-segment 0.3s ease forwards;
}

@keyframes cross-first-segment {
    from { transform: rotate(45deg) scale(0); }
    to { transform: rotate(45deg) scale(1); }
}

@keyframes cross-second-segment {
    from { transform: rotate(-45deg) scale(0); }
    to { transform: rotate(-45deg) scale(1); }
}

这些CSS代码提供了对号和错号的基本水波纹效果。你可以根据自己的需求调整大小、颜色和动画速度。在HTML中，你只需为相应的元素添加checkmark或crossmark类即可。

<div class="checkmark"></div>
<div class="crossmark"></div>

请注意，这些样式和动画可能需要根据不同浏览器进行调整。