CSS 实现卡片以及鼠标移入特效
/* 设置卡片的基本样式 */
.card {
width: 200px;
height: 260px;
background-color: #fff;
border: 1px solid #e5e5e5;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
transition: transform 0.5s, box-shadow 0.5s; /* 添加过渡动画 */
}
/* 鼠标移入卡片时的样式变化 */
.card:hover {
transform: scale(1.1); /* 卡片放大效果 */
box-shadow: 0 10px 20px rgba(0,0,0,0.19); /* 卡片阴影效果 */
}
/* 在此处添加更多样式，如卡片内文本的样式等 */这段代码展示了如何使用CSS为卡片元素添加基本样式和鼠标移入时的放大与阴影效果。通过transform属性实现缩放效果，通过box-shadow属性添加阴影效果，并使用transition属性为这些变化添加平滑的过渡动画。这是一个简单的交互效果示例，可以被用作学习和教学目的。
评论已关闭