效果实现：悬浮下方的阴影，随着鼠标移动而偏移

想要实现标题所示的效果，可以使用 css 的 box-shadow 属性。该属性可以为元素添加阴影效果，并且可以通过 inset 值将其置于元素内部。

通过在 box-shadow 属性中使用 inset 值以及一个较大的 spread 值，我们可以创建一个悬浮在元素下方并随鼠标移动而偏移的阴影效果。

以下是实现此效果的 css 代码：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

element {
  position: relative;
  box-shadow: 0px 0px 0px 1000px inset black;
  transition: box-shadow 0.2s ease-in-out;
}

element:hover {
  box-shadow: 0px 0px 0px 100px inset black;
}

效果展示：

[在线示例](https://codesandbox.io/s/intera...)

注意：

此方法可能会导致性能问题，尤其是在页面上有多个具有此效果的元素时。建议仅在必要时使用此技术。