css3 鼠标点击后

CSS3是当前最流行的前端样式表之一，它不仅可以实现网页的美化，还增加了交互性和动画效果。其中，鼠标点击后的效果是重要的交互体验之一。

通常情况下，点击后的效果可以使用:hover伪类实现，但是这种效果只能在鼠标悬停时才能显示出来，不能满足点击效果的要求。

.button:active {
  background: #ff0000;
  color: #fff;
  Box-shadow: inset 0 1px 4px rgba(0,0.6);
}

为了实现点击后的效果，CSS3提供了一个:active伪类。当鼠标按下时，:active伪类就会生效，可以为元素添加特殊的样式。

在上面的代码中，.button代表需要添加点击效果的按钮元素，:active伪类表示鼠标按下后的状态。我们可以在其中使用background、color和Box-shadow等属性来实现不同的效果。

值得注意的是，:active伪类只有当鼠标按下时才会生效，当鼠标弹起时，效果也会消失。如果需要保持效果，可以使用:focus伪类或其他交互事件。

总的来说，鼠标点击后的效果是网页交互设计的重要环节之一，CSS3提供的:active伪类可以实现简单的点击效果，为网页体验增加更多的乐趣。