如何实现谷歌搜索框鼠标悬停时的边缘阴影效果？

如何实现谷歌搜索框鼠标悬停时的边缘阴影效果？

在谷歌搜索中，当鼠标悬停在搜索框和按钮上时，会产生一种精致的边缘阴影效果。实现这一效果需要使用 css 的 box-shadow 属性。

box-shadow 属性

box-shadow 属性允许在元素周围创建阴影效果。其语法为：

box-shadow: [水平偏移量] [垂直偏移量] [模糊半径] [阴影颜色];

实现阴影效果

要在搜索框和按钮上创建边缘阴影效果，可以设置如下 css 样式：

.search-box, .search-button {
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
  transition: box-shadow 0.2s ease-in-out;
}

.search-box:hover, .search-button:hover {
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);
}

使用方法

1. 为搜索框和按钮添加 search-box 和 search-button 类。
2. 应用 box-shadow 属性，为非悬停状态设置阴影，并为悬停状态设置更深的阴影。
3. 使用 transition 属性平滑悬停时的阴影过渡效果。

如此一来，当鼠标悬停在搜索框或按钮上时，就会出现精美的边缘阴影效果。

以上就是如何实现谷歌搜索框鼠标悬停时的边缘阴影效果？的详细内容，更多请关注其它相关文章！