css点击背景 |css 文字反转

要实现这个效果，可以利用CSS3的伪元素和transition属性。以下是一个实现点击背景效果的CSS代码的示例：

/* 设置背景的样式 */
body {
background-color: #f1f1f1; /* 设置背景颜色 */
overflow: hidden; /* 禁止页面滚动 */
}
/* 设置灰色背景的样式 */
body::after {
content: ""; /* 设置伪元素 */
display: block; /* 将伪元素设置为块级元素 */
position: fixed; /* 将伪元素定位 */
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* 将背景设置为半透明 */
opacity: 0; /* 设置初始状态下的透明度为0 */
transition: opacity 0.3s ease-in-out; /* 设置过渡效果 */
}
/* 当点击页面时，改变背景的状态 */
body.clicked::after {
opacity: 1; /* 将背景透明度设置为1，以显示半透明层 */
}

在HTML文档中，可以通过添加一个事件监听器来处理用户单击页面的事件：

document.addEventListener('click', function() {
document.body.classList.add('clicked'); /* 向body元素添加clicked类 */
});

通过这些CSS和JavaScript代码，可以轻松地实现一个醒目的点击背景效果。