当前位置： 首页 > news >正文

CSS3实现提示工具的渐入渐出效果及CSS3动画简介

news 2026/3/30 15:58:39

上一篇文章用CSS3实现了一个提示工具，本文介绍如何利用CSS3实现提示工具以渐入的方式呈现，以渐出的方式消失。

CSS3主要可以通过两个样式来实现动画效果：animation和transition。

其中，animation需要自己定义一组关键帧从而实现动画，例如：

@keyframes fadein {from { opacity: 0;}to { opacity: 1;visibility: visible;}
}
@keyframes fadeout {from { opacity: 1;visibility: visible;}to {opacity: 0;visibility: hidden;}
}
.tooltip .tooltiptext {visibility: hidden;animation:fade 1s infinite;
}
.tooltip:hover .tooltiptext {animation: fadein 2s 1;
}

上面的css中fadein和fadeout定义了两组动画关键帧（其中每组关键帧中样式组的名称“from”、“to”其实是可以自己随便写的，只要不违反CSS命名规则即可），每一组关键帧实际上就是一个动画，fadein和fadeout就是动画的名称。完成动画定义后，在需要播放动画的元素的CSS中用样式animation即可播放，它的参数包括要播放的关键组（动画）名称、持续时间和重播次数（infinite表示无限循环播放）。如上面的定义就可以在鼠标进入工具元素区域时让提示文本渐入，鼠标移出工具元素区域时让提示文本渐出。还可以通过“,”分隔在animation样式中播放多个动画。

animation动画可以精确控制动画的关键帧，但是编写CSS比较复杂。在提示工具这个用例中显然没必要弄得这么复杂，因此，可以用自动生成关键帧的transition样式来编写。

在上文中的animation动画中，我们使用了visibility和opacity两个属性来控制tooltiptext的显示与隐藏。这主要是由于visibility样式在hidden和visible之间没有过渡状态，因此，无法通过transition产生平滑渐入渐出式动画，也无法在关键帧组中自己定义出一个中间状态，它只会在到了播放时间时突然出现或者消失，而opacity则从0到1之间有无限个可用的连续值作为中间状态。

使用transition样式来实现tooltiptext的渐入渐出可以按如下方式定义：

.tooltip .tooltiptext {visibility: hidden;opacity: 0;transition: opacity 2s linear,visibility 2s;
}.tooltip:hover .tooltiptext {visibility: visible;opacity: 1;transition: opacity 2s linear;
}

可以看出来transition比animation的CSS定义要简洁得多，但是与animation对tooltiptext的visibility和opacity的初始定义要求并不严格不同的是，transition则必须要严格定义好tooltiptext的visibility和opacity的初始值。完整演示页面如下：

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><title>tooltip的渐入与渐出</title><style>.tooltip {position: relative;display: inline-block;background-color: aqua;}.tooltip .tooltiptext {width: 140%;background-color: gray;text-align: left;text-indent: 2em;border-radius: 0.5em;padding: 0.2em 0.1em;color: #ff0;top: 1.5em;left: 1em;/* 定位 */position: absolute;z-index: 1;/*动画效果*/visibility: hidden;transition: opacity 2s linear, visibility 2s;opacity: 0;}.tooltip:hover .tooltiptext {visibility: visible;opacity: 1;transition: opacity 2s linear;}</style>
</head><body><div class="tooltip">工具元素<span class="tooltiptext">搜索后如有匹配内容高亮，请清空搜索框消除高亮，以免高亮标记被笔记保存。</span><input type="text" placeholder="搜索..."></div><span>相邻元素</span><br><div>下方的元素</div></body></html>

页面效果如下：

相关文章：

CSS3实现提示工具的渐入渐出效果及CSS3动画简介

上一篇文章用CSS3实现了一个提示工具&#xff0c;本文介绍如何利用CSS3实现提示工具以渐入的方式呈现&#xff0c;以渐出的方式消失。 CSS3主要可以通过两个样式来实现动画效果&#xff1a;animation和transition。 其中&#xff0c;animation需要自己定义一组关键帧从而实现…...

编程日记 2024/7/18 12:42:28

JVM 垃圾回收算法

一、如何确定为垃圾 引用计数法 在对象中添加一个引用计数器&#xff0c;每当有一个地方引用它时&#xff0c;计数器值就加一&#xff1b;当引用失效时&#xff0c;计数器值就减一&#xff0c;当引用为0&#xff0c;则认为对象可被回收。引用计数不能解决循环引用的问题 根可…...

编程日记 2024/7/18 12:37:24

吴恩达大模型系列课程《Prompt Compression and Query Optimization》中文学习打开方式

Prompt Compression and Query Optimization GPT-4o详细中文注释的Colab观看视频1 浏览器下载插件2 打开官方视频 GPT-4o详细中文注释的Colab 中文注释链接&#xff1a;https://github.com/Czi24/Awesome-MLLM-LLM-Colab/tree/master/Courses/Prompt-Compression-and-Query-Op…...

编程日记 2024/7/18 12:36:23

2.javaWeb_请求和响应的处理(Request,Response)

2.请求和响应的处理 文章目录 2.请求和响应的处理一、动态资源和静态资源javax.servlet(包) 二、Servlet体系1.简介2.HttpServlet3.Servlet生命周期 三、Request对象1.ServletRequest1)ServletRequest主要功能有&#xff1a;2)ServletRequest类的常用方法: 2.HttpServletReques…...

编程日记 2024/7/18 12:34:21

用C++、Python、Rust编写的有安全问题的B树

程序猿们都知道&#xff0c;B树&#xff08;B-tree&#xff09;是一种平衡的多路查找树&#xff0c;主要用于存储和检索大量数据&#xff0c;常用于数据库和文件系统中。 B树的特性包括&#xff1a; 每个节点可以包含多个关键字&#xff08;键值&#xff09;和对应的孩子指针…...

编程日记 2024/7/18 12:33:20

问题：当直齿圆柱齿轮的齿数少于?时，可采用 变位的办法来避免根切。 #学习方法#其他

问题&#xff1a;当直齿圆柱齿轮的齿数少于?时&#xff0c;可采用　　　　　变位的办法来避免根切。 参考答案如图所示...

编程日记 2024/7/18 12:31:18

请你谈谈：spring bean的生命周期 - 阶段2：Bean实例化阶段

在Spring框架中&#xff0c;Bean的实例化是Bean生命周期中的一个重要阶段。这个过程包括两个关键的子阶段&#xff1a;Bean实例化前阶段和Bean实例化阶段本身。 BeanFactoryPostProcessor&#xff1a;BeanFactoryPostProcessor是容器启动阶段Spring提供的一个扩展点&#xff0…...

编程日记 2024/7/18 12:30:18

【开发指南】HTML和JS编写多用户VR应用程序的框架

1.概述 Networked-Aframe 的工作原理是将实体及其组件同步到连接的用户。要连接到房间&#xff0c;您需要将networked-scene组件添加到a-scene元素。对于要同步的实体&#xff0c;请向其添加networked组件。默认情况下&#xff0c;position和rotation组件是同步的&#xff0c;…...

编程日记 2024/7/18 12:29:16

C语言第6天作业 7月17日

删除字符串中的空格字符 从终端输入一个字符串&#xff0c;要求删除字符串中的空格字符。提示&#xff1a;可以新建一个辅助数组 #include <stdio.h> #include <string.h> int main(int argc, const char *argv[]) {char str[100];char str1[100];gets(str);for(in…...

编程日记 2024/7/18 12:27:15

【BES2500x系列 -- RTX5操作系统】深入探索CMSIS-RTOS RTX -- 配置篇 -- flash的使用 --（八）

&#x1f48c; 所属专栏&#xff1a;【BES2500x系列】 &#x1f600; 作  者&#xff1a;我是夜阑的狗&#x1f436; &#x1f680; 个人简介&#xff1a;一个正在努力学技术的CV工程师&#xff0c;专注基础和实战分享 &#xff0c;欢迎咨询&#xff01; &#x1f49…...

编程日记 2024/7/18 12:26:13

vue视频、图片自动轮播并伴随进度条

废话不多说直接上代 多余没用的部分自己看着删除 <template><div class"showImg"><el-carousel ref"carousel" trigger"hover" :autoplay"false" class"dimControl" :height"${(currenInnerWith*0.37…...

编程日记 2024/7/18 12:25:12

Android Studio环境安装指南

一、安装前注意事项&#xff1a; 安装android studio之前&#xff0c;请先检查下操作系统中的用户名(C盘->用户或user)下是否含有中文&#xff0c;如果含有中文&#xff0c;请新建一个用户&#xff08;必须全部英文&#xff09;&#xff0c;JDK的安装和配置也请重新安装和配…...

编程日记 2024/7/18 12:21:06

CentOS 7 初始化环境配置详细

推荐使用xshell远程连接&#xff0c;如链接不上 请查看 CentOS 7 网络配置 修改主机名 hostname hostnamectl set-hostname xxx bash 关闭 SElinux 重启之后生效 配置yum源&#xff08;阿里&#xff09; 先备份CentOS-Base.repo&#xff0c;然后再下载 mv /etc/yum.repos…...

编程日记 2024/7/18 12:17:56

数据结构（双向链表）

链表的分类 链表的结构⾮常多样&#xff0c;以下情况组合起来就有8种&#xff08;2 x 2 x 2&#xff09;链表结构&#xff1a; 虽然有这么多的链表的结构&#xff0c;但是我们实际中最常⽤还是两种结构&#xff1a;单链表和双向带头循环链表 1.⽆头单向⾮循环链表&#xff1a…...

编程日记 2024/7/18 12:15:54

关于Kafka的17个问题

1.Kafka 的设计时什么样的呢&#xff1f; Kafka 将消息以 topic 为单位进行归纳 将向 Kafka topic 发布消息的程序成为 producers. 将预订 topics 并消费消息的程序成为 consumer. Kafka 以集群的方式运行&#xff0c;可以由一个或多个服务组成&#xff0c;每个服务叫做一个…...

编程日记 2024/7/18 12:14:53

Redis 散列

1. 数据结构 我们自底向上来描述redis散列涉及的数据结构。 首先是负责存储键值的结构&#xff0c;Java 中存储的结构叫 Entry&#xff0c;redis里也差不多&#xff0c;叫dictEntry: typedef struct dictEntry {void *key; // 键&#xff0c;它是一个指针类型…...

编程日记 2024/7/18 12:11:50

ip地址错误无法上网怎么修复

在数字化日益普及的今天&#xff0c;网络已经成为我们生活中不可或缺的一部分。然而&#xff0c;当遇到IP地址错误导致无法上网的问题时&#xff0c;很多人可能会感到手足无措。那么&#xff0c;IP地址错误无法上网怎么修复&#xff1f;下面跟着虎观代理小二一起来了解一下吧。…...

编程日记 2024/7/18 12:08:45

数据库管理的艺术（MySQL）：DDL、DML、DQL、DCL及TPL的实战应用（上：数据定义与控制）

文章目录 DDL数据定义语言1、创建数据库2、创建表3、修改表结构4、删除5、数据类型 列的约束主键约束&#xff08;primary key&#xff09;唯一约束&#xff08;unique key&#xff09;非空约束检查约束&#xff08;check&#xff09;外键约束&#xff08;foreign key&#xff…...

编程日记 2024/7/18 12:07:44

成为CMake砖家(5): VSCode CMake Tools 插件基本使用

大家好&#xff0c;我是白鱼。 之前提到过&#xff0c;白鱼的主力 编辑器/IDE 是 VSCode&#xff0c; 也提到过使用 CMake Language Support 搭配 dotnet 执行 CMakeLists.txt 语法高亮。 对于阅读 CMakeLists.txt 脚本&#xff0c; 这足够了。 而在 C/C 开发过程中&#xff…...

编程日记 2024/7/18 12:05:42

【简洁明了】调节大模型的prompt的方法【带案例】

简明调节大模型的prompt的方法【简洁明了带案例】 1. 明确任务目标2. 提供上下文3. 指定格式4. 限制输出长度5. 使用示例6. 逐步引导7. 提供反面例子8. 使用CoT思维链9. 反复试验和调整方法九解释&#xff1a;乔哈里窗检视 最后 因为网上给出的调节prompt都 过于详细&#xff…...

编程日记 2024/7/18 11:58:34

Heritrix3与Trough集成：实现高效内容分发的完整流程

Heritrix3与Trough集成&#xff1a;实现高效内容分发的完整流程 【免费下载链接】heritrix3 Heritrix is the Internet Archives open-source, extensible, web-scale, archival-quality web crawler project. 项目地址: https://gitcode.com/gh_mirrors/he/heritrix3 …...

编程新知 2026/3/30 15:14:42

[段错误修复]：Emacs代码补全崩溃的系统排查与版本管理策略

[段错误修复]&#xff1a;Emacs代码补全崩溃的系统排查与版本管理策略 【免费下载链接】doomemacs An Emacs framework for the stubborn martian hacker 项目地址: https://gitcode.com/gh_mirrors/do/doomemacs 副标题&#xff1a;如何诊断LSP服务异常导致的Emacs崩溃…...

编程新知 2026/3/30 14:26:05

Blender 5.0 插件生态实战指南：从建模到渲染的流程效率革命

1. Blender 5.0插件生态的核心价值 如果你用过Blender&#xff0c;一定遇到过这样的场景&#xff1a;建模时反复手动倒角、UV展开时对着乱七八糟的贴图发呆、渲染时发现场景灯光怎么调都不自然。这些问题在Blender 5.0的插件生态中都能找到优雅的解决方案。 我做了10年三维设计…...

编程新知 2026/3/30 14:13:32

别再死记硬背！用Python（SymPy库）自动推导DC-DC变换器的小信号模型

用Python解放双手&#xff1a;SymPy自动推导DC-DC变换器小信号模型的工程实践 当电源工程师面对Buck、Boost电路的小信号模型推导时&#xff0c;那些繁琐的矩阵运算和拉普拉斯变换是否让你头疼不已&#xff1f;传统手工推导不仅耗时费力&#xff0c;还容易在代数运算中出错。本…...

编程新知 2026/3/30 13:47:10

Qwen3-ForcedAligner与Node.js后端集成方案

Qwen3-ForcedAligner与Node.js后端集成方案 1. 引言 语音处理在现代应用中越来越重要&#xff0c;从语音识别到音频分析&#xff0c;都需要高效可靠的技术方案。Qwen3-ForcedAligner作为一个强大的强制对齐模型&#xff0c;能够精确地将文本与语音进行时间戳对齐&#xff0c;…...

编程新知 2026/3/30 13:08:26

百川2-13B模型辅助C语言学习：从语法答疑到代码调试

百川2-13B模型辅助C语言学习&#xff1a;从语法答疑到代码调试 学C语言&#xff0c;尤其是刚入门那会儿&#xff0c;你是不是也经历过这样的时刻&#xff1f;面对指针、内存这些概念&#xff0c;感觉像在看天书&#xff1b;自己写的代码编译报错&#xff0c;满屏的红色提示让人…...

编程新知 2026/3/30 12:56:22

Ollama GUI架构解析：现代本地LLM交互界面的技术实现与隐私优先设计

Ollama GUI架构解析&#xff1a;现代本地LLM交互界面的技术实现与隐私优先设计 【免费下载链接】ollama-gui 项目地址: https://gitcode.com/gh_mirrors/ol/ollama-gui 在人工智能技术快速发展的今天&#xff0c;本地化部署的大语言模型&#xff08;LLM&#xff09;成为…...

编程新知 2026/3/30 12:04:05

SQL注入的分类靶场实践

SQL注入的分类靶场实践 前言 SQL 注入&#xff08;SQL Injection&#xff09;是一种常见且危险的 Web 安全漏洞&#xff0c;攻击者通过在输入字段中插入恶意 SQL 代码&#xff0c;能够绕过应用程序的验证机制&#xff0c;直接操纵数据库。本文将介绍 SQL 注入的分类&#xff…...

编程新知 2026/3/30 11:48:01

别再手动切换收发！用SP3485芯片实现RS485自动收发电路的保姆级教程

用SP3485芯片实现RS485自动收发电路的完整设计指南 在工业控制、楼宇自动化等长距离通信场景中&#xff0c;RS485接口因其抗干扰能力强、传输距离远等优势成为首选。然而传统RS485设计需要手动控制收发使能信号&#xff0c;不仅增加软件复杂度&#xff0c;还容易因时序错误导致…...

编程新知 2026/3/30 11:41:57

MusePublic Art Studio参数详解：随机种子锁定与艺术风格复现方法

MusePublic Art Studio参数详解&#xff1a;随机种子锁定与艺术风格复现方法 1. 理解随机种子&#xff1a;艺术创作的"基因密码" 在AI图像生成领域&#xff0c;随机种子就像是每幅作品的DNA序列。它决定了生成过程中的随机性因素&#xff0c;是控制输出结果一致性的…...

编程新知 2026/3/30 11:23:47