css卡片跳动 |css3媒体查询取中间

.card {
width: 200px;
height: 200px;
background-color: #fff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
border-radius: 10px;
transition: transform 0.3s ease-out;
}
.card:hover {
transform: translateY(-10px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

以上代码实现了一个基本的CSS卡片跳动效果。首先定义了一个卡片的样式（.card），包括宽度、高度、背景色、阴影和边框半径等属性。接着使用CSS过渡（transition）属性定义了卡片在动作时的缓动效果，这里采用了“ease-out”函数，表示动作结束时速度变慢。当鼠标悬停在卡片上时（.card:hover），使用CSS变换（transform）属性向上移动10个像素（translateY(-10px)）,并增加了阴影的宽度和透明度。

通过使用CSS卡片跳动效果，可以为用户带来更加生动的视觉交互体验，同时也可以增强网页的美观度和互动性。