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

2025年3月26日 | 阅读 1 分钟

CSS 淡入工具提示或工具提示动画用于在工具提示文本即将显示时淡入。CSS3 的“transition”属性与“opacity”属性一起用于实现淡入工具提示或工具提示动画。从完全不可见到 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 JavaTpoint</strong>
<span class="tooltiptext">A solution of all technology.</span>
</div>
</body>
</html>

下一主题带箭头的 CSS 工具提示

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

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

CSS 教程

CSS 属性

CSS Advance

CSS Design

CSS Questions

杂项

CSS 多选题

面试题

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

相关帖子

CSS User Interface

flex-grow property

CSS @keyframes rule

CSS Pagination

CSS masking

CSS FlexBox

CSS Tooltips

CSS Loader

CSS Aural Media

flex-basis property

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器