zoukankan      html  css  js  c++  java
  • 如何使用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- 3em;
        max- 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上产生不一致的着色效果。

    https://www.houdianzi.com/ vi设计公司

    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- 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- 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- 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- 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关键词在动画的声明中,这告诉动画当完成时不重置,而是继续停留在结束。

  • 相关阅读:
    oracle分页查询sql写法
    查询一张表的id,不在另外一张表的某个字段的数据
    PowerDesigner 使用详解
    java JUC多线程高并发编程
    npm node-sass安装失败解决方法
    Vue中展示二级路由的默认模块 若依框架 自定义指令权限的使用说明
    vue 2.6以后slot 的变化使用
    java中 List<? extends T>与List<? super T> 表示的意思和区别
    java springboot自定义注解 和 时间加一天 一个月 一年方式
    js中||与&&的用法以及every()与some()的用法
  • 原文地址:https://www.cnblogs.com/xiaonian8/p/15143740.html
Copyright © 2011-2022 走看看