鼠標懸浮特效：常見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>
結語
本文主要介紹了6種常見的鼠標懸浮背景類特效，你還知道哪些鼠標懸浮背景類特效？歡迎在評論區留言分享！
![[人機交互]理解與概念化交互](http://pic.xiahunao.cn/[人機交互]理解與概念化交互)
