css 如何添加点击效果 |css导航里的字撑大

//通过伪类:hover添加鼠标悬停效果
button:hover {
background-color: #4CAF50;
color: white;
}

上面的代码中，大家使用了CSS的伪类:hover来添加鼠标悬停时的效果。当鼠标悬停在button元素上面时，它的背景颜色会变成绿色，字体颜色变成白色。这种效果可以让用户更容易地感知按钮的功能以及交互状态。

//通过CSS transition添加平滑过渡效果
button {
background-color: #008CBA;
color: white;
transition: background-color 0.5s ease;
}
button:hover {
background-color: #4CAF50;
}

上面的代码中，大家使用了CSS transition来添加平滑过渡效果。在button元素中，大家为背景颜色设置了0.5秒的过渡时间和一个缓动函数。这样，当鼠标悬停在按钮上时，背景颜色将会平滑地变成绿色。这种效果不仅可以增强用户交互体验，还可以让页面看起来更加流畅和自然。

//通过CSS animation添加动画效果
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
button {
background-color: #008CBA;
color: white;
animation: pulse 2s infinite;
}

上面的代码中，大家使用了CSS animation来添加动画效果。大家定义了一个名为pulse的关键帧动画，通过逐渐改变按钮的缩放大小来实现按钮的脉动效果。在按钮样式中，大家调用了这个动画，并将它重复播放2秒钟。这样，就会出现一个看起来很有活力的交互样式。

总之，CSS提供了很多方式来添加点击效果，大家可以通过:hover、transition和animation来实现不同形式的效果。通过添加交互和动画效果，大家可以让网页看起来更加吸引人，用户体验也更优秀。大家可以根据自己的需求来选择不同的实现方式，从而创造出更有意思、更有用的网页设计。