个性化阅读
专注于IT技术分析

CSS工具提示动画/淡入工具提示

工具提示文本中的CSS淡入或工具提示动画用于在工具提示文本即将显示时淡入。 CSS3的“过渡”属性与“不透明度”属性一起使用, 以在工具提示或工具提示动画中获得淡入淡出的效果。从完全不可见到100%可见的动画时间以秒为单位指定。

让我们以一个示例来演示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>
赞(0)
未经允许不得转载:srcmini » CSS工具提示动画/淡入工具提示

评论 抢沙发

评论前必须登录!