鼠标悬浮特效：常见6种背景类悬浮特效

前言
背景闪现
- 效果预览
- 代码展示
元素阴影
- 效果预览
- 代码展示
元素悬浮阴影
- 效果预览
- 代码展示
元素上浮阴影
- 效果预览
- 代码展示
元素边框阴影
- 效果预览
- 代码展示
元素卷角
- 效果预览
- 代码展示
结语

前言

在之前的文章中，我们介绍了常见的鼠标悬浮特效分为元素边框类特效（改变元素边框的展示方式）和元素背景类特效（改变元素背景颜色、阴影等）。在之前的文章中，介绍了常见6种边框类悬浮特效。本文将着重介绍日常开发中，常见的6种元素背景类特效。

背景闪现

背景闪现：鼠标悬浮时，元素产生一个新背景，其效果图如下所示：

效果预览

背景闪现

代码展示

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>背景闪现</title><style>.hover-border {margin: 50px;width: 200px;height: 100px;background-color: #e0e0e0;position: relative;transition: background-color 0.3s ease;/* 文字相关属性 */display: flex;justify-content: center;align-items: center;font-size: 20px;color: #333;}.hover-border:hover {background-color: #230FEE;}</style></head><body><div class="hover-border">背景闪现</div></body></html>

元素阴影

元素阴影：鼠标悬浮时，元素产生阴影效果，其效果图如下所示：

效果预览

元素阴影

代码展示

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>元素阴影</title><style>.hover-border {margin: 50px;width: 200px;height: 100px;background-color: #e0e0e0;position: relative;transition: background-color 0.3s ease;/* 文字相关属性 */display: flex;justify-content: center;align-items: center;font-size: 20px;color: #333;}.hover-border:hover {box-shadow:  5px 5px 10px;}</style></head><body><div class="hover-border">元素阴影</div></body></html>

元素悬浮阴影

元素悬浮阴影：鼠标悬浮时，元素向外扩大，并产生阴影效果，其效果图如下所示：

效果预览

元素悬浮阴影

代码展示

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>元素悬浮阴影</title><style>.hover-border {margin: 50px;width: 200px;height: 100px;background-color: #e0e0e0;position: relative;transition: background-color 0.3s ease;/* 文字相关属性 */display: flex;justify-content: center;align-items: center;font-size: 20px;color: #333;}.hover-border:hover {transform: scale(1.1);box-shadow:  5px 5px 10px;}</style></head><body><div class="hover-border">元素悬浮阴影</div></body></html>

元素上浮阴影

元素悬浮阴影：鼠标悬浮时，元素会向上浮动，同时在元素下方生成一个缩小的投影，其效果图如下所示：

效果预览

元素上浮阴影

代码展示

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>元素上浮阴影</title><style>.hover-border {margin: 50px;width: 200px;height: 100px;background-color: #e0e0e0;position: relative;/* 文字相关属性 */display: flex;justify-content: center;align-items: center;font-size: 20px;color: #333;}.hover-border::before {content: '';position: absolute;z-index: -1;top: 100%;left: 5%;height: 10px;width: 90%;opacity: 0;background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);}.hover-border:hover {transform: translateY(-10px);}.hover-border:hover::before {opacity: 1;transform: translateY(10px);}</style></head><body><div class="hover-border">元素上浮阴影</div></body></html>

元素边框阴影

元素边框阴影：鼠标悬浮时，元素左侧和上侧会产生一个内阴影，看起来元素像是“下沉”到页面中了，其效果图如下所示：

效果预览

元素边框阴影

代码展示

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>元素边框阴影</title><style>.hover-border {margin: 50px;width: 200px;height: 100px;background-color: #e0e0e0;position: relative;/* 文字相关属性 */display: flex;justify-content: center;align-items: center;font-size: 20px;color: #333;}.hover-border:hover {box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.2);}</style></head><body><div class="hover-border">元素边框阴影</div></body></html>

元素卷角

元素卷角：鼠标悬浮时，元素的一个角卷起来了，其效果图如下所示：

效果预览

元素卷角

代码展示

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>元素卷角</title><style>.hover-border {margin: 50px;width: 200px;height: 100px;background-color: #e0e0e0;position: relative;/* 文字相关属性 */display: flex;justify-content: center;align-items: center;font-size: 20px;color: #333;}.hover-border::before {content: "";position: absolute;top: 0;left: 0;width: 0;height: 0;border-style: solid;border-width: 0;border-color: rgba(255, 255, 255, 0.8) transparent transparent rgba(255, 255, 255, 0.8);box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);transition: border-width 0.3s ease;}.hover-border:hover::before {border-width: 20px;}</style></head><body><div class="hover-border">元素卷角</div></body></html>