今天小编跟大家讲解下有关如何使用CSS创建巧妙的动画提示框 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关如何使用CSS创建巧妙的动画提示框 的相关资料，希望小伙伴们看了有所帮助。
当你的用户需要一些额外的上下文来放置图标 或者当他们需要一些保证来点击按钮 或者可能是一个复活节彩蛋的标题来搭配一个图片时 工具提示是一个很好的方法来增强用户界面。现在让我们来制作一些动画工具提示 只使用html和css。
演示
以下是我们的工作目标:
主要目标是拥有一种添加工具提示的简单方法 因此我们将通过添加自定义tooltip属性来做到这一点：
<span tooltip="message">visible text or icon, etc.</span>关于可访问性和功能的说明
如果您正在寻找508兼容的工具提示 或者需要更智能的工具提示 支持容器冲突检测和/或支持html内容与纯文本 那么有许多使用第三方脚本的解决方案可以满足您的这些需求。
让我们设定几个预期
不需要JavaScript
我们将会使用属性选择器（而不是类名） 以及css内建的模式匹配
加到现有的DOM元素（你的标签中不需要新的元素）
代码例子中是没有前缀的（如有需要 为你的目标浏览器加上供应商前缀）
假设通过 mouseover/hover 来触发提示框
仅仅是纯文本提示框（html 图片等等都不支持）
当唤起提示框时 有巧妙的动画
下面我们开始
我们还要先处理一个问题 是关于"不需要额外标签"的。毕竟 这很巧妙。 我们的提示框真的不需要额外的DOM元素 因为它们完全是基于伪元素的（::before和::after） 我们可以通过css来控制。
如果你已经在其它样式集中使用了一个元素的伪元素 又希望在这个元素是加一个提示框 那么你可能需要稍稍做一些重构。
提示框
还有一个警告：css定位。为了提示框正常运作 它们的父元素（我们把提示框添加在它后面）需要是
position: relative 或者
position: absolute 或
position: fixed
基本上 什么都行 只要不是 position: static — 这是浏览器赋给几乎所有元素的默认定位模式。提示框是绝对定位的 所以它们需要知道它们的绝对值在什么边界内是有意义的。
默认的定位指令 static 不会声明它的边界 也不会给我们的提示框以上下文来进行相对定位。所以提示框会使用之后 最近的 有声明边界的父元素。
你需要决定哪个位置指令最适合你如何使用工具提示。本教程假设位置:相对于父元素。如果您的UI依赖于一个绝对定位的元素 那么可能还需要一些重组(额外的标记)来在该元素上部署工具提示。
属性选择器：快速回顾
大多数css规则印象中都是用类名写的 比如.this-thing,但是css有几个类型的选择器。我们巧妙的提示框打算使用属性选择器——也就是方括号表示法。
[foo] { background: rgba(0, 0, 0, 0.8); color: #fff;}当浏览器看到诸如此类的东西时：
<span foo>Check it out!</span>浏览器会知道 它需要应用[foo]规则了 因为<span>标签有一个叫做foo的属性。在这个例子中 span自身会有一个半透明的黑色背景 以及白色文字。
html元素有着各种各样的内置属性 但是我们也可以给出我们自己的属性。比如 foo 又或者是 tooltip 。默认情况下 html不知道这些东西是什么意思 但是有了css 我们可以告诉html这些自定义属性是什么意思。
为什么用属性选择器
我们后面会使用属性选择器 主要是出于侧重分离的目的。使用属性而不是类名 并不会让我们在详细程度上获得更多益处 类和属性在详细程度上是相同的。 然而 通过使用属性 我们可以把我们的内容放在一块儿 因为html属性可以有值 而类名没有值。
在这个例子的代码中 来权衡一下类名.tooltip对比属性[tooltip]。类名是[class]属性的值中的一个 而tooltip属性可以存放一个值 它就是我们要显示的文字。
<span>lorem ipsum</span><span tooltip="sit dolar amet">lorem ipsum</span>使用提示框
我们的提示框会使用两种不同的属性：
tooltip: 这个属性存放了提示框的内容（一个纯文本字符串）
flow:可选；这个属性允许我们控制如何显示提示框。我们可以支持很多方位 但是我们会覆盖4各常用方位：上 左 右 下
1. 相对性
这是用在提示框的父元素上的。让我们来给定一个定位指令 这样提示框的组成部分（即::before和::after伪元素）的绝对定位就可以以父元素做参照进行定位 而不是以整个页面或祖父元素或DOM树上方的其它外围元素作为参照进行定位。
[tooltip] { position: relative;}2. 伪元素准备
在这里 我们要对::before和::after设置常用属性。content属性是真正让伪元素工作的属性 不过我们稍后再讨论它。
[tooltip]::before,[tooltip]::after { line-height: 1; user-select: none; pointer-events: none; position: absolute; display: none; opacity: 0; /* opinions */ text-transform: none; font-size: .9em;}3、Dink
它是一个尖尖的小三角形 通过指向它的调用者 为提示框提供对话气泡的感觉。 注意到我们在边界颜色这一块 使用了tranparent；由于上色要根据提示框的flow值来 所以之后再加上颜色。
[tooltip]::before { content: ''; z-index: 1001; border: 5px solid transparent;}content: '';声明中的值是一个空字符串 这并不是笔误。字符串里面 我们不想要任何东西 但是我们需要这个属性 使得伪元素得以存在。
为了生成一个三角形 我们定义了一个实现边框 在空的盒子（没有内容）上加了一些厚度 而不设定盒子的宽度和高度 仅仅对盒子的每一条边都给一个边框颜色。
4、气泡
这里是重点了。注意内容：attr（tooltip）部分说：“此伪元素应使用tooltip属性的值作为其内容。”这就是为什么对类名使用属性是如此之好！
[tooltip]::after { content: attr(tooltip); /* magic! */ z-index: 1000; /* most of the rest of this is opinion */ font-family: Helvetica, sans-serif; text-align: center; /* Let the content set the size of the tooltips but this will also keep them from being obnoxious */ min-width: 3em; max-width: 21em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* visible design of the tooltip bubbles */ padding: 1ch 1.5ch; border-radius: .3ch; box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35); background: #333; color: #fff;}请注意 dink和气泡的z-index值。 这些是任意值 但请记住 z索引值是相对的。 含义：z-index为3的元素内部的z-index值为1001只是意味着1001元素将是该z-index：3容器中最顶层的元素。
气泡的z-index应比Dink的z-index至少降低1步。 如果它等于或高于该dink 那么如果您的工具提示使用了框阴影 则最终会在dink上产生不一致的着色效果。
5、交互作用
我们的提示框是通过把鼠标移动到带提示框的元素上面 来激活的。差不多是这样。
[tooltip]:hover::before,[tooltip]:hover::after { display: block;}如果您在第2步中回顾我们的样式块 应该会看到我们使用了opacity：0;连同显示：无； 用于我们的工具提示部分。 我们这样做是为了在显示和隐藏工具提示时可以使用css动画效果。
display属性是不能做成动画的 但是opacity属性可以！我们留到最后来处理动画的问题。如果你对动画提示框没兴趣 只要把第2步中的opacity: 0;删掉 无视第7步即可。
最后一件要应用到所有提示框上的是 如果提示框没有内容 能有一个方法来抑制提示框。如果你使用某种动态系统（vue.js, Angular, 或者 react, php等等）来生成提示框的话 我们就不需要笨笨的空白气泡了！
/* don't show empty tooltips */[tooltip='']::before,[tooltip='']::after { display: none !important;}6、流控制
这一步会变得更加复杂 因为我们会使用一些不那么常见的选择器 来帮助我们的提示框基于 flow 值（或没有flow属性）来确定位置。
在我们写样式之前 让我们看看将要用到一些选择器模式。
[tooltip]:not([flow])::before,[tooltip][flow^="up"]::before { /* ... properties: values ... */}这是在告诉浏览器：“对于所有带有tooltip属性来说 其中没有 flow 属性的元素 或者有flow元素 但它的值是以'up'开头的：将这些样式套用到这类元素的::before伪元素上。”
我们在这里使用了一个模式 这样一来 这些东西可以扩展到其它流上 而步需要重复这么多的css。这个模式flow^="up"使用了^=（开头）匹配符。 如果你想增加其它流控制的话 通过这个模式 也可以将样式应用在up-right和up-left方向上（代码中）。
Up (default):
/* ONLY the ::before */[tooltip]:not([flow])::before,[tooltip][flow^="up"]::before { bottom: 100%; border-bottom-width: 0; border-top-color: #333;} /* ONLY the ::after */[tooltip]:not([flow])::after,[tooltip][flow^="up"]::after { bottom: calc(100% + 5px);} /* Both ::before & ::after */[tooltip]:not([flow])::before,[tooltip]:not([flow])::after,[tooltip][flow^="up"]::before,[tooltip][flow^="up"]::after { left: 50%; transform: translate(-50%, -.5em);}Down:
[tooltip][flow^="down"]::before { top: 100%; border-top-width: 0; border-bottom-color: #333;} [tooltip][flow^="down"]::after { top: calc(100% + 5px);} [tooltip][flow^="down"]::before,[tooltip][flow^="down"]::after { left: 50%; transform: translate(-50%, .5em);}Left:
[tooltip][flow^="left"]::before { top: 50%; border-right-width: 0; border-left-color: #333; left: calc(0em - 5px); transform: translate(-.5em, -50%);} [tooltip][flow^="left"]::after { top: 50%; right: calc(100% + 5px); transform: translate(-.5em, -50%);}Right:
[tooltip][flow^="right"]::before { top: 50%; border-left-width: 0; border-right-color: #333; right: calc(0em - 5px); transform: translate(.5em, -50%);} [tooltip][flow^="right"]::after { top: 50%; left: calc(100% + 5px); transform: translate(.5em, -50%);}7、对所有事物进行动画处理
动画是很神奇的。动画可以做到：
让用户感觉舒服
让用户感受到你的用户界面的空间感
注意到该看到的东西
让用户界面中本来非黑即白的生硬效果变得柔和
我们的提示框属于最后那一种。如果仅仅是让一个文字泡泡出现然后突然消失 效果是不令人满意的 我们可以让它更柔和一些。
@keyframes
我们需要两个关键帧 (@keyframe) 动画。向上/向下提示框要用到tooltips-vert关键帧 而向左/向右提示框使用tooltips-horz关键帧。 注意 在这些关键帧中 我们只定义了提示框所需的终止状态。
我们并不需要知道它们从何处来 (提示框本身就有状态信息)。我们只想控制它们要到哪儿去。
@keyframes tooltips-vert { to { opacity: .9; transform: translate(-50%, 0); }} @keyframes tooltips-horz { to { opacity: .9; transform: translate(0, -50%); }}现在 当用户将鼠标悬停在触发元素(带有[tooltip]属性的元素)上时 我们需要将这些关键帧应用于工具提示。由于我们正在使用各种流来控制工具提示的显示方式 所以我们需要在样式中确定这些可能性。
使用:hover将控制传递给动画
[tooltip]:not([flow]):hover::before,[tooltip]:not([flow]):hover::after,[tooltip][flow^="up"]:hover::before,[tooltip][flow^="up"]:hover::after,[tooltip][flow^="down"]:hover::before,[tooltip][flow^="down"]:hover::after { animation: tooltips-vert 300ms ease-out forwards;} [tooltip][flow^="left"]:hover::before,[tooltip][flow^="left"]:hover::after,[tooltip][flow^="right"]:hover::before,[tooltip][flow^="right"]:hover::after { animation: tooltips-horz 300ms ease-out forwards;}我们不能对display属性进行动画 但是可以通过操作opacity属性 在提示框上加上淡入效果。我们也可以动画transform属性 它可以给提示框加上微妙的动作 触发的元素就像飞入某点的一样。
主要forward关键词在动画的声明中 这告诉动画当完成时不重置 而是继续停留在结束。
来源：爱蒂网