当我们在浏览网页的时候经常看到一些提示工具,最常见的就是提示框样式,提示框不仅可以很明确的起到导航作用,还可以将隐藏的信息展示出来的同时不占用网页空间,所以在前端开发的过程中需要了解提示工具的编写。那么本文将向大家展示一下一个提示框的特殊效果:淡入效果的提示框。有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
使用HTML5+CSS3来创建淡入效果的提示框步骤
步骤一:设置一个基础提示框
代码如下
PHP中文网.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;
}
提示文本
效果如图所示
步骤二:使用 CSS3 transition 属性及 opacity 属性来实现提示工具的淡入效果
代码如下
PHP中文网.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;
}
淡入效果
鼠标移动到以下元素,提示工具会再一秒内从 0% 到 100% 完全显示。
666666666666
效果如图所示
总结
在HTML中使用容器元素 (like
在css3中tooltip 类使用 position:relative, 提示文本需要设置定位值 position:absolute。对于tooltiptext 类用于实际的提示文本,模式是隐藏的,在鼠标移动到元素显示,我们只需要设置了一些宽度、背景色、字体色等样式。