溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下怎么使用HTML5+CSS3來創建淡入效果的提示框，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！
使用HTML5+CSS3來創建淡入效果的提示框步驟
步驟一：設置一個基礎提示框
代碼如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>億速云</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 style="text-align:center;">
<div class="tooltip">鼠標移動到這
<span class="tooltiptext">提示文本</span>
</div>
</body>
</html>效果如圖所示
步驟二：使用 CSS3 transition 屬性及 opacity 屬性來實現提示工具的淡入效果
代碼如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>億速云</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 style="text-align:center;">
<h3>淡入效果</h3>
<p>鼠標移動到以下元素，提示工具會再一秒內從 0% 到 100% 完全顯示。</p>
<div class="tooltip">億速云
<span class="tooltiptext">666666666666</span>
</div>
</body>
</html>效果如圖所示
總結在HTML中使用容器元素 (like <div>) 并添加 "tooltip" 類，在鼠標移動到 <div> 上時就會顯示提示信息，那么當提示文本放在內聯元素上(如 <span>) 并使用class="tooltiptext"，而:hover 選擇器用于在鼠標移動到到指定元素 <div> 上時顯示的提示。
在css3中tooltip 類使用 position:relative, 提示文本需要設置定位值 position:absolute。對于tooltiptext 類用于實際的提示文本，模式是隱藏的，在鼠標移動到元素顯示，我們只需要設置了一些寬度、背景色、字體色等樣式。
看完了這篇文章，相信你對怎么使用HTML5+CSS3來創建淡入效果的提示框有了一定的了解，想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
