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

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

news 2025/7/3 12:00:44

上一篇文章用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实现提示工具的渐入渐出效果及CSS3动画简介

JVM 垃圾回收算法

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

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

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

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

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

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

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

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

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

Android Studio环境安装指南

CentOS 7 初始化环境配置详细

数据结构（双向链表）

关于Kafka的17个问题

Redis 散列

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

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

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

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

在HarmonyOS ArkTS ArkUI-X 5.0及以上版本中，手势开发全攻略：

django filter 统计数量按属性去重

【JavaWeb】Docker项目部署

JVM暂停（Stop-The-World，STW）的原因分类及对应排查方案

RNN避坑指南：从数学推导到LSTM/GRU工业级部署实战流程

基于TurtleBot3在Gazebo地图实现机器人远程控制

C++：多态机制详解

Golang——6、指针和结构体

群晖NAS如何在虚拟机创建飞牛NAS

从“安全密码”到测试体系：Gitee Test 赋能关键领域软件质量保障