css实现点击后图标变色 |水波涟漪 css

想要实现点击后图标变色，大家需要定义两种样式，一种是正常状态下的样式，一种是点击状态下的样式。大家可以利用CSS中伪类的特性来表示这两种状态。在正常状态下，大家可以使用如下代码定义图标的样式：

.icon {
color: #333;
}

在点击状态下，大家希望图标的颜色变成另外一种颜色，比如红色。大家可以使用如下代码表示这种状态：

.icon:active {
color: #f00;
}

上述代码中，大家使用了伪类:active来表示点击状态下的样式。这个伪类表示当鼠标按下时，元素处于激活状态。同时，大家将字体颜色设置为红色。

通过以上的设置，大家就可以实现点击后图标变色的效果了。当用户点击图标时，它的颜色就会变成红色，松开鼠标后又会变回原来的颜色。