工具提示文本中的CSS淡入或工具提示动画用于在工具提示文本即将显示时淡入。 CSS3的“过渡”属性与“不透明度”属性一起使用, 以在工具提示或工具提示动画中获得淡入淡出的效果。从完全不可见到100％可见的动画时间以秒为单位指定。
【CSS工具提示动画/淡入工具提示】让我们以一个示例来演示CSS工具提示动画。在此示例中, 淡入时间为5秒。
请参阅以下示例：
<
!DOCTYPE html>
<
html>
<
style>
.tooltip {position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}.tooltip .tooltiptext {visibility: hidden;
width: 120px;
background-color: red;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
margin-left: -60px;
/* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */opacity: 0;
transition: opacity 5s;
}.tooltip:hover .tooltiptext {visibility: visible;
opacity: 1;
}<
/style>
<
body style="text-align:center;
">
<
h2>
Fade In Tooltip Example<
/h2>
<
p>
Move your mouse cursor over the below heading<
/p>
<
div class="tooltip">
<
strong>
Welcome to srcmini<
/strong>
<
span class="tooltiptext">
A solution of all technology.<
/span>
<
/div>
<
/body>
<
/html>
推荐阅读
- CSS箭头用法
- CSS工具提示tooltip
- CSS过渡transition
- CSS渐变gradient
- CSS动画animation
- CSS计数器counter
- CSS可见性visibility
- CSS轮廓outline
- CSS文字换行word-wrap