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

鼠标悬浮特效：常见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://www.mzph.cn/diannao/81829.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

[人机交互]理解与概念化交互

[人机交互]理解与概念化交互

零.本章重点&#xff08;理解和分析用户问题&#xff09; – 解释“问题空间”的概念和含义 – 解释如何概念化交互 – 描述什么是概念模型 – 讨论将界面隐喻作为概念模型的利弊 – 讨论界面具体化和抽象化各自的优缺点 – 概述概念设计和实际设计的关系 一.理解问题空间 简单…
阅读更多...
9.城市基础设施更新工程

9.城市基础设施更新工程

9.1 道路改造施工 9.1.1 道路改造施工内容 沥青、水泥混凝土、砌块路面、人行步道、绿化照明、附属设施、交通标志、沥青路面材料的再生利用 9.1.2 道路改造施工技术 1.沥青路面病害及微表处理 1.病害处理 裂缝处理 10mm以内专业灌缝材料或热沥青灌缝、潮湿时乳化沥青灌封…
阅读更多...
Milvus（11）：动态字段、可归零和默认值

Milvus（11）：动态字段、可归零和默认值

1 动态字段 Collections 的 Schema 中定义的所有字段都必须包含在要插入的实体中。如果希望某些字段是可选的&#xff0c;可以考虑启用动态字段。 1.1 概述 在 Milvus 中&#xff0c;可以通过设置 Collections 中每个字段的名称和数据类型来创建 Collections Schema。向 Schem…
阅读更多...
LeetCode41☞缺失的第一个正数

LeetCode41☞缺失的第一个正数

关联LeetCode题号41 本题特点 数组&#xff0c;哈希表 本题思路 找缺失的最小正数&#xff0c;看举例说明缺失的正数&#xff0c;一种情况是连续的最小的正数&#xff0c;一种是缺失连续但不是最小的正数验证数组内数组是否连续&#xff0c;可以通过 nums[i]1 是否存nums组…
阅读更多...
补题（ Convolution， 二维卷积求输出矩阵元素和最大值）

补题（ Convolution， 二维卷积求输出矩阵元素和最大值）

来源&#xff1a;https://codeforces.com/gym/105231/problem/H 题目描述&#xff1a; 一、题目分析 本题涉及深度学习中的二维卷积操作。给定一个nm的二维输入矩阵I和一个kl的核矩阵K &#xff0c;通过特定公式计算得到(n - k 1)(m - l 1)的输出矩阵O &#xff0c;要求在…
阅读更多...
【Java ee初阶】多线程（7）

【Java ee初阶】多线程（7）

一、线程池 线程池的一些参数&#xff1a; corePoolSize&#xff1a;核心线程数量 maximumPoolSize:核心线程数量临时线程数量 上述是“java 的线程池策略”&#xff08;其他语言&#xff0c;其他库的线程池可能不同&#xff09; keepAliveTime :临时线程的存活时间.临时线程…
阅读更多...
Linux 常用指令详解

Linux 常用指令详解

Linux 操作系统中有大量强大的命令行工具&#xff0c;下面我将分类介绍一些最常用的指令及其用法。 ## 文件与目录操作 ### 1. ls - 列出目录内容 ls [选项] [目录名] 常用选项&#xff1a; - -l&#xff1a;长格式显示&#xff08;详细信息&#xff09; - -a&#xff1a;显…
阅读更多...
uv安装及使用

uv安装及使用

windows安装参考&#xff1a; 什么是python uv&#xff0c;如何在windows上安装uv&#xff0c;基础的用法有哪些&#xff1f;_windows安装uv-CSDN博客 https://zhuanlan.zhihu.com/p/6776864377 使用方式 方式1&#xff1a; 创建uv虚拟环境->激活环境->安装依赖&…
阅读更多...
C#实现Socket通信：基于TCP/IP协议的网络编程

C#实现Socket通信：基于TCP/IP协议的网络编程

TCP/IP网络模型 最上层的是应用层&#xff0c;也就是我们日常可以接触到的&#xff0c;它会给数据添加对应的头部&#xff0c;并传输给传输层&#xff0c;应用层是我们日常会接触到的&#xff0c;比如HTTP&#xff0c;FTP&#xff0c;Telnet&#xff0c;DNS&#xff0c;SMTP。…
阅读更多...
哈希算法、搜索算法与二分查找算法在 C# 中的实现与应用

哈希算法、搜索算法与二分查找算法在 C# 中的实现与应用

在计算机科学中&#xff0c;哈希算法、搜索算法和二分查找算法是三个非常基础且常用的概念。它们分别在数据存储、数据查找、以及高效检索等场景中起着至关重要的作用。在 C# 中&#xff0c;这些算法的实现和使用也十分简便。本文将详细讲解这三种算法的原理、应用以及 C# 中的…
阅读更多...
AI日报 · 2025年5月05日｜雅诗兰黛与微软合作成立 AI 创新实验室，加速美妆产品研发与营销

AI日报 · 2025年5月05日｜雅诗兰黛与微软合作成立 AI 创新实验室，加速美妆产品研发与营销

1、苹果与 Anthropic 深化合作&#xff0c;内部测试 AI 驱动的新版 Xcode 据多方报道&#xff0c;苹果公司正与人工智能初创公司 Anthropic 合作&#xff0c;开发集成 AI 功能的新一代 Xcode 开发平台。该平台旨在利用 Anthropic 强大的 Claude Sonnet 模型&#xff0c;为开发…
阅读更多...
python celery框架结合django的使用

python celery框架结合django的使用

学习目标&#xff1a; 通过文章了解celery的运行机制以及如何结合django去使用 熟悉celery的运行原理属性celery在django项目当中的配置如何启动运行celery框架 学习内容&#xff1a; 熟悉celery的运行原理&#xff0c;简单来说 Celery 是一个“任务排队机后台处理器”。帮你…
阅读更多...
滑动窗口leetcode 904

滑动窗口leetcode 904

代码&#xff1a; class Solution { public:int totalFruit(vector<int>& fruits) {int n fruits.size();unordered_map<int,int> window_type_count;int left 0;int ans 0;for(int right 0; right <n;right){while(window_type_count.size() 2 &&…
阅读更多...
用可视化学习逆置法

用可视化学习逆置法

1.逆置法思路 目标&#xff1a;将这个彩色数组向右旋转3步 &#x1f534;1 → &#x1f7e0;2 → &#x1f7e1;3 → &#x1f7e2;4 → &#x1f535;5 → &#x1f7e3;6 → ⚪7我们希望得到 &#x1f535;5 → &#x1f7e3;6 → ⚪7 → &#x1f534;1 → &#x1f7e0;…
阅读更多...
Cisco Packet Tracer 选项卡的使用

Cisco Packet Tracer 选项卡的使用

目录 设备Config选项卡的使用 Realtime and Simulation模式&#xff08;数据包跟踪与分析&#xff09; 设备Desktop选项卡的使用 设备Config选项卡的使用 Hostname NVRAM Startup Config----Load 加载 INTERFACE 点击on Save 如果&#xff0c;不把Running Config保存为Sta…
阅读更多...
pyqt写一个单片机配置界面

pyqt写一个单片机配置界面

已经实现以下功能 1.可以选择单片机架构 2.选择完单片机架构后第二个框可以选择常见单片机型号 3.选择完常见单片机型号后第三个框可以选择内部资源如adc等&#xff08;可以选择多个内部资源&#xff09;4.选择完内部资源如adc等&#xff08;可以选择多个内部资源&#xff09;后…
阅读更多...
丢失的数字 --- 位运算

丢失的数字 --- 位运算

目录 一&#xff1a;题目 二&#xff1a;算法原理 三&#xff1a;代码实现 一&#xff1a;题目 题目链接&#xff1a; 268. 丢失的数字 - 力扣&#xff08;LeetCode&#xff09; 二&#xff1a;算法原理 三&#xff1a;代码实现 class Solution { public:int missingNumb…
阅读更多...
千锋教育Ansible自动化运维实战教程从入门到精通

千锋教育Ansible自动化运维实战教程从入门到精通

简介 介绍 Ansible 的基本概念、自动化运维优势、应用场景及课程目标。 欢迎开启 Ansible 学习之旅&#xff01; 你好&#xff01;作为一名学习者&#xff0c;你即将通过这个 Ansible 自动化运维实战 课程&#xff0c;从零开始掌握自动化运维的超能力&#xff01;这个“简介”…
阅读更多...
深入理解 TensorFlow 的模型保存与加载机制（SavedModel vs H5）

深入理解 TensorFlow 的模型保存与加载机制（SavedModel vs H5）

深入理解 TensorFlow 的模型保存与加载机制&#xff08;SavedModel vs H5&#xff09; 在使用 TensorFlow 进行模型训练后&#xff0c;模型的保存与加载是部署、复用和迁移学习的重要环节。TensorFlow 提供了两种主要的保存格式&#xff1a;SavedModel 和 HDF5 (.h5)。本篇文章…
阅读更多...
C++之特殊类设计及类型转换

C++之特殊类设计及类型转换

目录 一、设计一个不能被拷贝的类 二、设计一个只能在堆上创建对象的类 三、设计一个只能在栈上创建对象的类 四、设计一个不能被继承的类 五、设计一个只能创建一个对象的类(单例模式) 六、C语言中的类型转换 七、C中的三类类型转换 八、C强制类型转换 8.1、为什么C需…
阅读更多...
最新文章

Copyright @ 2022~2023