使用HTML5+CSS3來創建淡入效果的提示框步驟

步驟一：設置一個基礎提示框

代碼如下

 !DOCTYPE html  html  head  meta charset= utf-8  title PHP  /title  /head  style .tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black;.tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; /* 定位 */ position: absolute; z-index: 1;.tooltip:hover .tooltiptext { visibility: visible; /style  body >
效果如圖所示
步驟二：使用 CSS3 transition 屬性及 opacity 屬性來實現提示工具的淡入效果
代碼如下
 !DOCTYPE html  html  head  meta charset= utf-8  title PHP  /title  /head  style .tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black;.tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; z-index: 1; bottom: 100%; left: 50%; margin-left: -60px; /* 淡入 - 1秒內從 0% 到 100% 顯示: */ opacity: 0; transition: opacity 1s;.tooltip:hover .tooltiptext { visibility: visible; opacity: 1; /style  body >
效果如圖所示
總結
在HTML中使用容器元素 (like div ) 并添加 tooltip 類，在鼠標移動到 div 上時就會顯示提示信息，那么當提示文本放在內聯元素上(如 span ) 并使用 >
在css3中tooltip 類使用 position:relative, 提示文本需要設置定位值 position:absolute。對于tooltiptext 類用于實際的提示文本，模式是隱藏的，在鼠標移動到元素顯示，我們只需要設置了一些寬度、背景色、字體色等樣式。
以上就是如何使用HTML5+CSS3來創建淡入效果的提示框（附完整代碼）的詳細內容，其它編程語言        
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。