CSS3實現Tooltip提示框飛入飛出動畫

2022-03-28 18:18:10 字數 1712 閱讀 3288

我們見過很多利用背景製作的tooltip提示框，但是缺點是擴充套件比較麻煩，要經常改動。還有就是利用多層css的疊加實現，但是效果比較生硬，外觀不怎麼好看。今天我來分享一下利用css3快速實現既美觀又實用的tooltip提示框，提示框伴有飛入飛出的動畫效果。先來看看效果圖。

看上去還簡單吧，其實實現的思路的確很簡單。

接下來我們來簡單分析一下這個tooltip實現的css3**。

首先是html**，主要是構造了3個小圖示選單以及對應的tooltip提示框內容：

<


div 


id="container"


>


<


div 


class


="item"


>


<


h1>d


h1>


<


div 


class


="tooltip"


>


<


p>find important documents and manuals.


p>


<


div 


class


="arrow"


>


div>


div>


div>


div>


<


div 


class


="item"


>


<


h1>a


h1>


<


div 


class


="tooltip"


>


<


p>take a look at our crew and become a friend.


p>


<


div 


class


="arrow"


>


div>


div>


div>


div>


<


div 


class


="item"


>


<


h1>c


h1>


<


div 


class


="tooltip"


>


<


p>explore our process and see how we can help.


p>


<


div 


class


="arrow"


>


div>


div>


div>
接下來是css**，首先我們定義了乙個圖示集，讓每個小按鈕都能顯示各自的圖示：

@font-face

h1
然後重點是實現tooltip提示框：

.tooltip .item:hover  .item:hover .tooltip .arrow
這裡我們對tooltip區域進行了圓角和陰影的效果渲染，讓其在滑鼠滑過是飛入，滑鼠移出是飛出，看得出來，實現這樣的效果主要還是利用了

-webkit-transition和-moz-transition
最後是乙個向下的小箭頭，用類.arrow來標識，上面的**也實現了這個css的實現。

CSS3實現Tooltip提示框飛入飛出動畫

我們見過很多利用背景製作的tooltip提示框，但是缺點是擴充套件比較麻煩，要經常改動。還有就是利用多層css的疊加實現，但是效果比較生硬，外觀不怎麼好看。今天我來分享一下利用css3快速實現既美觀又實用的tooltip提示框，提示框伴有飛入飛出的動畫效果。先來看看效果圖。看上去還簡單吧，其實實現的...

CSS 提示工具 Tooltip

以下例項中，提示工具顯示在指定元素的右側 left 105 注意 top 5px 同於定位在容器元素的中間。使用數字 5 因為提示文字的頂部和底部的內邊距 padding 是 5px。如果你修改 padding 的值，top 值也要對應修改，這樣才可以確保它是居中對齊的。tooltip toolti...

純CSS 實現tooltip 內容提示資訊效果

tooltip 也就是內容的提示資訊，合理使用可以給使用者比較好的體驗。實現方法有很多種，有很多js 外掛程式，我這裡介紹的是純css實現的方法，相容性也比較靠譜,ie8 均可正常顯示。實現方法也非常簡單。class css tooltip href data tooltip 137 likes w...