腾讯css动画工具_如何使用CSS制作魔术的动画工具提示

最新推荐文章于 2024-03-23 01:00:00 发布

daique1908

最新推荐文章于 2024-03-23 01:00:00 发布

阅读量222

点赞数

文章标签： css java html python css3

腾讯css动画工具

当用户需要一些用于该精美图标的上下文时，或者当他们希望单击按钮时有一些放心，或者可能是复活节彩蛋标题与图像一起显示时，工具提示是增强UI的好方法。现在，让我们制作一些动画的工具提示，除了HTML和CSS之外，什么都没有。

演示版

这是我们正在努力的方向：

在我们沉浸在大锅中之前，让我们看一下我们实际上正在酿造什么。主要目标是拥有一种添加工具提示的简单方法，因此我们将通过添加自定义tooltip属性来做到这一点：

<span tooltip="message">visible text or icon, etc.</span>

有关可访问性和功能的说明

如果您正在寻找508兼容的工具提示，或者需要具有容器碰撞检测功能和/或支持HTML内容和纯文本的更智能的工具提示，那么有很多解决方案可以使用第三方脚本来满足您的需求。

“ JavaScript必须成为可完全访问的交互式组件。” – Sara Soueidan，构建一个完全可访问的帮助工具提示...比我想象的要难

本教程未专门解决可访问性需求。您了解用户以及他们的需求，因此请务必在这方面考虑他们的需求。

让我们设定一些期望

无需JavaScript
我们将使用具有CSS内置模式匹配功能的属性选择器（而非类名）
添加到现有DOM元素（标记中不需要任何新元素*）
代码示例无前缀（如果需要，可为目标浏览器添加供应商前缀）
假设鼠标悬停/悬停以触发工具提示
仅纯文本工具提示（不支持HTML，图像等）
调用工具提示时的细微动画

让我们晃动这艘船！

等一下。首先要处理一个星号，即“不需要任何额外的标记”。毕竟，这是魔术。我们的工具提示实际上不需要任何额外的DOM元素，因为它们完全由我们可以通过CSS控制的伪元素（ ::before和::after事物）组成。

如果您已经在使用另一组样式中的元素的伪元素，并且想要在该元素上使用工具提示，则可能需要重新构造一下。

没有像工具提示聚会那样的聚会！

等待。小妖精！还有一个警告： CSS定位 。为了使工具提示正常运行，需要将其父元素（我们将其附加到工具提示上的元素）设置为

position: relative ，或
position: absolute ，或
position: fixed

基本上，除了 position: static的所有内容-这是浏览器分配给几乎所有元素的默认位置模式。工具提示的位置是绝对的，因此他们需要知道其绝对含义的边界。默认的位置指令static不会声明其自身的边界，也不会为我们的工具提示提供要推送的上下文，因此工具提示将使用具有已声明边界的下一个最接近的父元素。

您需要确定哪种位置指令最适合您使用工具提示的方式。本教程假定position: relative对于父元素。如果您的UI依赖于绝对定位的元素，则可能还需要进行一些重组（额外标记）才能在该元素上部署工具提示。

让我们进入，看看发生了什么。

快速刷新

大多数CSS规则在编写时都考虑了类名，例如.this-thing ，但是CSS具有少数选择器类型。我们的魔术工具提示将使用属性选择器，即方括号表示法：

[foo] {
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
}

当浏览器遇到如下情况时：

<span foo>Check it out!</span>

它会知道需要应用[foo]规则，因为<span>标记具有名为foo的属性。在这种情况下，跨度本身将具有带有白色文本的半透明黑色背景。

HTML元素具有各种内置属性，但我们也可以组成自己的属性。就像foo或tooltip 。默认情况下，HTML不知道这些含义是什么，但是使用CSS我们可以告诉HTML这意味着什么。

为什么选择属性？

我们将主要使用属性选择器来分离关注点。在类名上使用属性不会在特异性战争中获得任何加分。类和属性具有相同的特异性。但是，通过使用属性，我们可以将内容与内容保持一致，因为HTML属性可以具有值，而类名则没有。

考虑此示例代码中的类名.tooltip与属性[tooltip] 。 classname 是属性[class]的值之一，而tooltip属性具有值，这是我们要显示的文本。

<span class="tooltip another-classname">lorem ipsum</span>

<span tooltip="sit dolar amet">lorem ipsum</span>

现在进入工具提示炼金术

我们的工具提示将使用两个不同的属性：

tooltip ：它保存工具提示的内容（纯文本字符串）
flow ：可选 ; 这使我们可以控制如何显示工具提示。我们可以支持很多展示位置，但我们将介绍四个常见的展示位置：
上，左，右，下。

现在，让我们为所有工具提示设置基础。不管我们给它们提供什么流程，步骤1-5中的规则都适用于所有工具提示。步骤6-7区分了各个flow值。

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.丁克

我不知道为什么“粉红色”有意义，我一直都这样称呼它。这是一个小三角形的尖角部分，它通过指向调用它的东西来使工具提示的气泡感。注意，我们使用transparent的边框颜色。我们稍后将添加颜色，因为我们如何添加颜色取决于工具提示的flow 。

[tooltip]::before {
    content: '';
    z-index: 1001;
    border: 5px solid transparent;
}

content: '';不是错别字content: ''; 声明的值包含一个空字符串。我们不需要任何东西，但是我们确实需要该属性才能使伪元素存在。

4.泡泡！

这是东西的肉。注意content: 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-index值是相对的。含义：1001的z索引值的元件内以3只只是意味着1001元件将是z索引 内的最上面的元素的z-index：3的容器。

气泡的z-index应该比dink的z-index至少低一级。如果它等于或高于该dink，那么如果您的工具提示使用box-shadow则可能导致该dink的着色效果不一致。

5.互动行动

我们的提示是通过在与工具提示元素将鼠标激活... 差不多 。

[tooltip]:hover::before,
[tooltip]:hover::after {
    display: block;
}

如果您在步骤2中回顾我们的样式块，则应该看到我们使用了opacity: 0; 连同display: none; 用于我们的工具提示部分。我们这样做是为了在显示和隐藏工具提示时可以使用CSS动画效果。

display属性不能设置动画，但是opacity可以！我们将最后处理动画。如果您不喜欢动画的工具提示，只需清除opacity: 0; 步骤2中的声明，并忽略步骤7中的动画。

我们仍然需要适用于所有工具提示的最后一件事是一种在没有内容的情况下隐藏工具提示的方法。如果您使用一些动态系统（Vue.js，Angular或React，PHP等）填充工具提示，那么我们就不要傻的空气泡！

/* don't show empty tooltips */
[tooltip='']::before,
[tooltip='']::after {
    display: none !important;
}

6.流量控制

这一步会变得相当复杂，因为我们将使用一些不太常用的选择器来帮助我们的工具提示根据flow值（或缺少flow值）处理它们的位置。

“ Circle-K发生了奇怪的事情。” —特德·西奥多·洛根（Ted Theodore Logan）

在进入样式之前，让我们看一下将要使用的一些选择器模式。

[tooltip]:not([flow])::before,
[tooltip][flow^="up"]::before {
    /* ...
    properties: values
    ... */
}

这是在告诉浏览器：“对于具有tooltip属性的所有元素，这些元素要么没有 flow属性，要么具有以 'up' 开头的值的flow ：将这些样式应用于其::before伪元素。”

我们在这里使用一种模式，因此可以将它们扩展到其他流程，而无需重复太多CSS。此模式flow^="up"使用^= （以开头）匹配器。如果您要添加这些流控件，这将使样式也适用于右上和左上。我们不会在这里讨论这些内容，但是您可以在CodePen上的原始工具提示演示中看到它们的使用。

这是本教程涵盖的所有四个流程CSS块。

向上（默认）：

/* 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);
}

下：

[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);
}

剩下：

[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%);
}

对：

[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.对所有事物进行动画处理

动画很棒。动画可以：

帮助用户感到舒适
帮助用户了解您的用户界面的空间
引起对需要看到的事物的注意
软化UI的元素，否则这些元素将是二进制的开/关震击效果

我们的工具提示将落在最后的描述中。让它们变得更柔和 ，而不是让文本气泡突然出现并突然弹出。

@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]属性的元素）上时，我们需要将这些关键帧应用于工具[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属性进行动画处理，该属性赋予工具提示一个微妙的运动，就像它们飞向指向其触发元素一样。

注意动画声明中的forwards关键字。这告诉动画完成后不要重置，而是继续前进并停留在最后。