使用HTML+CSS制作一些動(dòng)畫(huà)提示工具的案例

這篇文章將為大家詳細(xì)講解有關(guān)使用HTML+CSS制作一些動(dòng)畫(huà)提示工具的案例，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

當(dāng)你的用戶需要一些額外的上下文來(lái)放置圖標(biāo)，或者當(dāng)他們需要一些保證來(lái)點(diǎn)擊按鈕，或者可能是一個(gè)復(fù)活節(jié)彩蛋的標(biāo)題來(lái)搭配一個(gè)圖片時(shí)，工具提示是一個(gè)很好的方法來(lái)增強(qiáng)用戶界面。現(xiàn)在讓我們來(lái)制作一些動(dòng)畫(huà)提示工具，只使用HTML和CSS。

演示

以下是我們的工作目標(biāo):

主要目標(biāo)是擁有一種添加工具提示的簡(jiǎn)單方法，因此我們將通過(guò)添加自定義tooltip屬性來(lái)做到這一點(diǎn)：

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

關(guān)于可訪問(wèn)性和功能的說(shuō)明

如果您正在尋找508兼容的工具提示，或者需要更智能的工具提示，支持容器沖突檢測(cè)和/或支持HTML內(nèi)容與純文本，那么有許多使用第三方腳本的解決方案可以滿足您的這些需求。

讓我們?cè)O(shè)定幾個(gè)預(yù)期

• 不需要JavaScript

• 我們將會(huì)使用屬性選擇器（而不是類(lèi)名），以及CSS內(nèi)建的模式匹配

• 加到現(xiàn)有的DOM元素（你的標(biāo)簽中不需要新的元素）

• 代碼例子中是沒(méi)有前綴的（如有需要，為你的目標(biāo)瀏覽器加上供應(yīng)商前綴）

• 假設(shè)通過(guò) mouseover/hover 來(lái)觸發(fā)提示框

• 僅僅是純文本提示框（HTML，圖片等等都不支持）

• 當(dāng)喚起提示框時(shí)，有巧妙的動(dòng)畫(huà)

下面我們開(kāi)始

我們還要先處理一個(gè)問(wèn)題，是關(guān)于"不需要額外標(biāo)簽"的。畢竟，這很巧妙。 我們的提示框真的不需要額外的DOM元素，因?yàn)樗鼈兺耆腔趥卧氐模?code >::before 和 ::after），我們可以通過(guò)CSS來(lái)控制。

如果你已經(jīng)在其它樣式集中使用了一個(gè)元素的偽元素，又希望在這個(gè)元素是加一個(gè)提示框，那么你可能需要稍稍做一些重構(gòu)。

提示框

還有一個(gè)警告：CSS定位。為了提示框正常運(yùn)作，它們的父元素（我們把提示框添加在它后面）需要是

• position: relative，或者

• position: absolute，或

• position: fixed        

基本上，什么都行，只要不是 position: static — 這是瀏覽器賦給幾乎所有元素的默認(rèn)定位模式。提示框是絕對(duì)定位的，所以它們需要知道它們的絕對(duì)值在什么邊界內(nèi)是有意義的。

默認(rèn)的定位指令 static 不會(huì)聲明它的邊界，也不會(huì)給我們的提示框以上下文來(lái)進(jìn)行相對(duì)定位。所以提示框會(huì)使用之后，最近的，有聲明邊界的父元素。

你需要決定哪個(gè)位置指令最適合你如何使用工具提示。本教程假設(shè)位置:相對(duì)于父元素。如果您的UI依賴于一個(gè)絕對(duì)定位的元素，那么可能還需要一些重組(額外的標(biāo)記)來(lái)在該元素上部署工具提示。

屬性選擇器：快速回顧

大多數(shù)CSS規(guī)則印象中都是用類(lèi)名寫(xiě)的，比如 .this-thing ,但是CSS有幾個(gè)類(lèi)型的選擇器。我們巧妙的提示框打算使用屬性選擇器——也就是方括號(hào)表示法。

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

當(dāng)瀏覽器看到諸如此類(lèi)的東西時(shí)：

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

瀏覽器會(huì)知道，它需要應(yīng)用 [foo] 規(guī)則了，因?yàn)?nbsp;<span> 標(biāo)簽有一個(gè)叫做 foo 的屬性。在這個(gè)例子中，span自身會(huì)有一個(gè)半透明的黑色背景，以及白色文字。

HTML元素有著各種各樣的內(nèi)置屬性，但是我們也可以給出我們自己的屬性。比如 foo ，又或者是 tooltip 。默認(rèn)情況下，HTML不知道這些東西是什么意思，但是有了CSS，我們可以告訴HTML這些自定義屬性是什么意思。

為什么用屬性選擇器？

我們后面會(huì)使用屬性選擇器，主要是出于側(cè)重分離的目的。使用屬性而不是類(lèi)名，并不會(huì)讓我們?cè)谠敿?xì)程度上獲得更多益處，類(lèi)和屬性在詳細(xì)程度上是相同的。 然而，通過(guò)使用屬性，我們可以把我們的內(nèi)容放在一塊兒，因?yàn)镠TML屬性可以有值，而類(lèi)名沒(méi)有值。

在這個(gè)例子的代碼中，來(lái)權(quán)衡一下類(lèi)名 .tooltip 對(duì)比屬性 [tooltip] 。類(lèi)名是 [class] 屬性的值中的一個(gè)，而tooltip屬性可以存放一個(gè)值，它就是我們要顯示的文字。

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

使用提示框

我們的提示框會(huì)使用兩種不同的屬性：

• tooltip: 這個(gè)屬性存放了提示框的內(nèi)容（一個(gè)純文本字符串）

• flow: 可選；這個(gè)屬性允許我們控制如何顯示提示框。我們可以支持很多方位，但是我們會(huì)覆蓋4各常用方位：上，左，右，下

1. 相對(duì)性

這是用在提示框的父元素上的。讓我們來(lái)給定一個(gè)定位指令，這樣提示框的組成部分（即::before 和 ::after 偽元素）的絕對(duì)定位就可以以父元素做參照進(jìn)行定位，而不是以整個(gè)頁(yè)面或祖父元素或DOM樹(shù)上方的其它外圍元素作為參照進(jìn)行定位。

[tooltip] {
  position: relative;
}

2. 偽元素準(zhǔn)備

在這里，我們要對(duì) ::before 和 ::after 設(shè)置常用屬性。content 屬性是真正讓偽元素工作的屬性，不過(guò)我們稍后再討論它。

[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

它是一個(gè)尖尖的小三角形，通過(guò)指向它的調(diào)用者，為提示框提供對(duì)話氣泡的感覺(jué)。 注意到我們?cè)谶吔珙伾@一塊，使用了 tranparent ；由于上色要根據(jù)提示框的 flow 值來(lái)，所以之后再加上顏色。

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

content: '';聲明中的值是一個(gè)空字符串，這并不是筆誤。字符串里面，我們不想要任何東西，但是我們需要這個(gè)屬性，使得偽元素得以存在。

為了生成一個(gè)三角形，我們定義了一個(gè)實(shí)現(xiàn)邊框，在空的盒子（沒(méi)有內(nèi)容）上加了一些厚度，而不設(shè)定盒子的寬度和高度，僅僅對(duì)盒子的每一條邊都給一個(gè)邊框顏色。

4、氣泡

這里是重點(diǎn)了。注意內(nèi)容：attr（tooltip）部分說(shuō)：“此偽元素應(yīng)使用tooltip屬性的值作為其內(nèi)容。”這就是為什么對(duì)類(lèi)名使用屬性是如此之好！

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

請(qǐng)注意，dink和氣泡的z-index值。 這些是任意值，但請(qǐng)記住，z索引值是相對(duì)的。 含義：z-index為3的元素內(nèi)部的z-index值為1001只是意味著1001元素將是該z-index：3容器中最頂層的元素。

氣泡的z-index應(yīng)比Dink的z-index至少降低1步。 如果它等于或高于該dink，那么如果您的工具提示使用了框陰影，則最終會(huì)在dink上產(chǎn)生不一致的著色效果。

5、交互作用

我們的提示框是通過(guò)把鼠標(biāo)移動(dòng)到帶提示框的元素上面，來(lái)激活的。差不多是這樣。

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

如果您在第2步中回顧我們的樣式塊，應(yīng)該會(huì)看到我們使用了opacity：0; 連同顯示：無(wú)； 用于我們的工具提示部分。 我們這樣做是為了在顯示和隱藏工具提示時(shí)可以使用CSS動(dòng)畫(huà)效果。

display屬性是不能做成動(dòng)畫(huà)的，但是opacity屬性可以！我們留到最后來(lái)處理動(dòng)畫(huà)的問(wèn)題。如果你對(duì)動(dòng)畫(huà)提示框沒(méi)興趣，只要把第2步中的 opacity: 0; 刪掉，無(wú)視第7步即可。

最后一件要應(yīng)用到所有提示框上的是，如果提示框沒(méi)有內(nèi)容，能有一個(gè)方法來(lái)抑制提示框。如果你使用某種動(dòng)態(tài)系統(tǒng)（Vue.js, Angular, 或者 React, PHP等等）來(lái)生成提示框的話，我們就不需要笨笨的空白氣泡了！

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

6、流控制

這一步會(huì)變得更加復(fù)雜，因?yàn)槲覀儠?huì)使用一些不那么常見(jiàn)的選擇器，來(lái)幫助我們的提示框基于 flow 值（或沒(méi)有flow屬性）來(lái)確定位置。

在我們寫(xiě)樣式之前，讓我們看看將要用到一些選擇器模式。

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

這是在告訴瀏覽器：“對(duì)于所有帶有 tooltip 屬性來(lái)說(shuō)，其中沒(méi)有 flow 屬性的元素，或者有flow元素，但它的值是以'up'開(kāi)頭的：將這些樣式套用到這類(lèi)元素的::before偽元素上?！?/p>

我們?cè)谶@里使用了一個(gè)模式，這樣一來(lái)，這些東西可以擴(kuò)展到其它流上，而步需要重復(fù)這么多的CSS。這個(gè)模式 flow^="up" 使用了 ^= （開(kāi)頭）匹配符。 如果你想增加其它流控制的話，通過(guò)這個(gè)模式，也可以將樣式應(yīng)用在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、對(duì)所有事物進(jìn)行動(dòng)畫(huà)處理

動(dòng)畫(huà)是很神奇的。動(dòng)畫(huà)可以做到：

• 讓用戶感覺(jué)舒服

• 讓用戶感受到你的用戶界面的空間感

• 注意到該看到的東西

• 讓用戶界面中本來(lái)非黑即白的生硬效果變得柔和

我們的提示框?qū)儆谧詈竽且环N。如果僅僅是讓一個(gè)文字泡泡出現(xiàn)然后突然消失，效果是不令人滿意的，我們可以讓它更柔和一些。

@keyframes

我們需要兩個(gè)關(guān)鍵幀 (@keyframe) 動(dòng)畫(huà)。向上/向下提示框要用到tooltips-vert關(guān)鍵幀，而向左/向右提示框使用tooltips-horz關(guān)鍵幀。 注意，在這些關(guān)鍵幀中，我們只定義了提示框所需的終止?fàn)顟B(tài)。

我們并不需要知道它們從何處來(lái) (提示框本身就有狀態(tài)信息)。我們只想控制它們要到哪兒去。

@keyframes tooltips-vert {
  to {
    opacity: .9;
    transform: translate(-50%, 0);
  }
}
 
@keyframes tooltips-horz {
  to {
    opacity: .9;
    transform: translate(0, -50%);
  }
}

現(xiàn)在，當(dāng)用戶將鼠標(biāo)懸停在觸發(fā)元素(帶有[tooltip]屬性的元素)上時(shí)，我們需要將這些關(guān)鍵幀應(yīng)用于工具提示。由于我們正在使用各種流來(lái)控制工具提示的顯示方式，所以我們需要在樣式中確定這些可能性。

使用:hover將控制傳遞給動(dòng)畫(huà)

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

我們不能對(duì)display屬性進(jìn)行動(dòng)畫(huà)，但是可以通過(guò)操作opacity屬性，在提示框上加上淡入效果。我們也可以動(dòng)畫(huà)transform屬性，它可以給提示框加上微妙的動(dòng)作，觸發(fā)的元素就像飛入某點(diǎn)的一樣。

感謝各位的閱讀！看完上述內(nèi)容，你們對(duì)使用HTML+CSS制作一些動(dòng)畫(huà)提示工具的案例大概了解了嗎？希望文章內(nèi)容對(duì)大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。

主要forward關(guān)鍵詞在動(dòng)畫(huà)的聲明中，這告訴動(dòng)畫(huà)當(dāng)完成時(shí)不重置，而是繼續(xù)停留在結(jié)束。

效果如下：

關(guān)于使用HTML+CSS制作一些動(dòng)畫(huà)提示工具的案例就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。