css实现点击大小变化 |网页css在线字体颜色

.box {
width: 100px;
height: 100px;
background-color: red;
}
.box:hover {
transform: scale(1.2);
}
.box:active {
transform: scale(0.8);
}

在上面的代码中，大家给一个名字为“box”的div设定了一个宽高为100px，并赋予它红色的背景颜色。在:hover伪类中，大家使用CSS的transform属性并设置了一个比例因子为1.2。这意味着当用户移动鼠标到这个元素上方时，元素的大小会增加20%。在:active伪类中，大家使用了同样的transform属性，但是设置了一个比例因子为0.8，这意味着当用户按压元素时，元素的大小会缩小20%。

这样一来，大家就可以通过使用CSS的伪类来实现在用户与元素交互时改变元素的大小。这种技巧可用于创建各种效果，从视觉上增强用户感受到的交互性，提高用户体验。