CSS实现卡片在鼠标悬停时突出效果
/* 定义卡片的基本样式 */
.card {
width: 200px;
height: 150px;
background-color: #f0f0f0;
margin: 10px;
display: inline-block;
position: relative;
transition: transform 0.5s, box-shadow 0.5s; /* 添加过渡动画 */
}
/* 鼠标悬停时卡片突出显示 */
.card:hover {
transform: scale(1.1); /* 卡片放大1.1倍 */
box-shadow: 0 10px 20px rgba(0,0,0,0.3); /* 添加阴影效果 */
}这段代码定义了一个名为.card的类，它包括了一个基本的卡片布局和样式，以及在鼠标悬停时卡片放大并添加阴影的效果。使用transform属性实现缩放效果，使用box-shadow属性添加阴影，并且通过transition属性为这些变化添加平滑的过渡动画。
评论已关闭