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

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

news 2026/1/31 2:11: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

Oracle查询表空间大小

1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...

编程新知 2025/11/8 0:24:13

cf2117E

原题链接&#xff1a;https://codeforces.com/contest/2117/problem/E 题目背景&#xff1a; 给定两个数组a,b&#xff0c;可以执行多次以下操作&#xff1a;选择 i (1 < i < n - 1)&#xff0c;并设置 或&#xff0c;也可以在执行上述操作前执行一次删除任意 和 。求…...

编程新知 2026/1/28 9:52:50

MODBUS TCP转CANopen 技术赋能高效协同作业

在现代工业自动化领域&#xff0c;MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步&#xff0c;这两种通讯协议也正在被逐步融合&#xff0c;形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...

编程新知 2026/1/30 9:02:02

【C语言练习】080. 使用C语言实现简单的数据库操作

080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码：使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出：5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作 在…...

编程新知 2025/9/22 21:37:01

UR 协作机器人「三剑客」：精密轻量担当（UR7e）、全能协作主力（UR12e）、重型任务专家（UR15）

UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中&#xff0c;UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化&#xf…...

编程新知 2026/1/15 5:21:57

深度学习习题2

1.如果增加神经网络的宽度&#xff0c;精确度会增加到一个特定阈值后&#xff0c;便开始降低。造成这一现象的可能原因是什么&#xff1f; A、即使增加卷积核的数量&#xff0c;只有少部分的核会被用作预测 B、当卷积核数量增加时&#xff0c;神经网络的预测能力会降低 C、当卷…...

编程新知 2026/1/26 5:53:30

高效线程安全的单例模式：Python 中的懒加载与自定义初始化参数

高效线程安全的单例模式：Python 中的懒加载与自定义初始化参数 在软件开发中，单例模式（Singleton Pattern）是一种常见的设计模式，确保一个类仅有一个实例，并提供一个全局访问点。在多线程环境下，实现单例模式时需要注意线程安全问题，以防止多个线程同时创建实例，导致…...

编程新知 2025/11/25 19:50:27

基于IDIG-GAN的小样本电机轴承故障诊断

目录 🔍 核心问题 一、IDIG-GAN模型原理 1. 整体架构 2. 核心创新点 (1) ​梯度归一化（Gradient Normalization）​​ (2) ​判别器梯度间隙正则化（Discriminator Gradient Gap Regularization）​​ (3) ​自注意力机制（Self-Attention）​​ 3. 完整损失函数 二…...

编程新知 2026/1/24 22:32:27

nnUNet V2修改网络——暴力替换网络为UNet++

更换前，要用nnUNet V2跑通所用数据集，证明nnUNet V2、数据集、运行环境等没有问题 阅读nnU-Net V2 的 U-Net结构，初步了解要修改的网络，知己知彼，修改起来才能游刃有余。 U-Net存在两个局限，一是网络的最佳深度因应用场景而异，这取决于任务的难度和可用于训练的标注数…...

编程新知 2026/1/28 23:51:31

0x-3-Oracle 23 ai-sqlcl 25.1 集成安装-配置和优化

是不是受够了安装了oracle database之后sqlplus的简陋&#xff0c;无法删除无法上下翻页的苦恼。 可以安装readline和rlwrap插件的话&#xff0c;配置.bahs_profile后也能解决上下翻页这些&#xff0c;但是很多生产环境无法安装rpm包。 oracle提供了sqlcl免费许可&#xff0c…...

编程新知 2025/11/27 2:47:09