您好,登錄后才能下訂單哦!
小編給大家分享一下怎么使用HTML5+CSS3來創(chuàng)建淡入效果的提示框,希望大家閱讀完這篇文章后大所收獲,下面讓我們一起去探討吧!
使用HTML5+CSS3來創(chuàng)建淡入效果的提示框步驟
步驟一:設(shè)置一個(gè)基礎(chǔ)提示框
代碼如下
<!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">鼠標(biāo)移動(dòng)到這 <span class="tooltiptext">提示文本</span> </div> </body> </html>
效果如圖所示
步驟二:使用 CSS3 transition 屬性及 opacity 屬性來實(shí)現(xiàn)提示工具的淡入效果
代碼如下
<!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秒內(nèi)從 0% 到 100% 顯示: */ opacity: 0; transition: opacity 1s; } .tooltip:hover .tooltiptext { visibility: visible; opacity: 1; } </style> <body style="text-align:center;"> <h3>淡入效果</h3> <p>鼠標(biāo)移動(dòng)到以下元素,提示工具會(huì)再一秒內(nèi)從 0% 到 100% 完全顯示。</p> <div class="tooltip">億速云 <span class="tooltiptext">666666666666</span> </div> </body> </html>
效果如圖所示
總結(jié)在HTML中使用容器元素 (like <div>) 并添加 "tooltip" 類,在鼠標(biāo)移動(dòng)到 <div> 上時(shí)就會(huì)顯示提示信息,那么當(dāng)提示文本放在內(nèi)聯(lián)元素上(如 <span>) 并使用class="tooltiptext",而:hover 選擇器用于在鼠標(biāo)移動(dòng)到到指定元素 <div> 上時(shí)顯示的提示。
在css3中tooltip 類使用 position:relative, 提示文本需要設(shè)置定位值 position:absolute。對(duì)于tooltiptext 類用于實(shí)際的提示文本,模式是隱藏的,在鼠標(biāo)移動(dòng)到元素顯示,我們只需要設(shè)置了一些寬度、背景色、字體色等樣式。
看完了這篇文章,相信你對(duì)怎么使用HTML5+CSS3來創(chuàng)建淡入效果的提示框有了一定的了解,想了解更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。