如何使用HTML5+CSS3来创建淡入效果的提示框（附完整代码）

使用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来创建淡入效果的提示框（附完整代码）的详细内容，其它编程语言        
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。