返回

鼠标悬停卡片升起并发光的CSS特效

前端

网页设计中，鼠标悬停在元素上时触发视觉效果已成为一种常见的交互设计模式。其中，卡片上升并出现亮光特效是一种既美观又实用的设计元素。

实现原理

要实现鼠标悬停卡片升起并发光的CSS特效，需要结合以下两个核心概念：

  1. 元素悬停伪类（:hover）： 该伪类用于为元素在鼠标悬停时应用样式。
  2. 盒子阴影（box-shadow）： 该属性可为元素添加阴影效果，在悬停时，我们将调整阴影值来创建发光效果。

步骤分解

1. 定义卡片样式

首先，我们需要定义卡片的默认样式。这包括设置其尺寸、背景色和边框等基本属性。

.card {
  width: 200px;
  height: 150px;
  background-color: #fff;
  border: 1px solid #ccc;
}

2. 定义悬停样式

接下来，我们使用:hover伪类定义鼠标悬停时的样式。我们将应用transform属性来向上平移卡片，并使用box-shadow属性添加亮光效果。

.card:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

通过将transform属性的值设置为translateY(-10px)，我们向上平移卡片10像素，营造出上升效果。box-shadow属性的参数代表阴影的偏移量、模糊半径和颜色。我们将阴影设置为黑色并降低其透明度，以创建微妙的发光效果。

完整代码示例

将上述样式整合在一起，可以得到完整的CSS代码示例：

.card {
  width: 200px;
  height: 150px;
  background-color: #fff;
  border: 1px solid #ccc;
}

.card:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

实例演示

将CSS代码应用于HTML元素后，即可在网页中看到鼠标悬停卡片升起并发光的特效。

<div class="card">
  <h1>Card Title</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

扩展

此特效可以进一步扩展，以创建更复杂的效果。例如，可以通过增加transform的旋转值来实现卡片旋转效果，或通过调整box-shadow的模糊半径和透明度来改变亮光强度。