纯css卡片悬停模糊代码

要创建一个使用纯 CSS 实现的卡片，在悬停时产生模糊效果，你需要结合 HTML 和 CSS。下面是一个基本示例。

HTML: 定义一个卡片。

<div class="card">
    <div class="content">
        <h2>Card Title</h2>
        <p>This is some card content.</p>
    </div>
</div>

CSS: 添加样式以及悬停时的模糊效果。

.card {
    width: 300px;
    height: 200px;
    background-color: #f1f1f1;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.card:hover {
    transform: scale(1.05);
    filter: blur(2px);
}

.content {
    padding: 20px;
}

h2 {
    margin-top: 0;
}

在此示例中，.card 类定义了卡片的基本外观和尺寸。当鼠标悬停在卡片上时，transform 属性稍微放大了卡片，而 filter 属性则给卡片添加了模糊效果。这种效果在用户体验设计中通常用来引起用户对某个元素的注意。