三角箭頭提示框是一種常見的Web頁面元素,它可以用來提示用戶、顯示錯誤信息等等。CSS3提供了一種快速實現(xiàn)三角箭頭提示框的方法。以下是一個簡單的CSS3代碼示例:
/*定義三角箭頭提示框的樣式*/ .tooltip { position: relative; /*相對定位,請勿省略*/ display: inline-block; /*內(nèi)聯(lián)元素*/ } /*定義三角箭頭提示框的箭頭*/ .tooltip:before { content: ""; /*請勿省略*/ position: absolute; /*絕對定位*/ border-width: 6px 6px 0 6px; /*設(shè)置三角形邊框的寬度用于定義三角形大小*/ border-color: #aaa transparent transparent transparent; /*定義三角形邊框的顏色*/ bottom: 100%; /*將箭頭放在內(nèi)容框上面*/ left: 50%; /*將箭頭放在內(nèi)容框的中央*/ margin-left: -6px; /*將箭頭向左移動三角形寬度的一半*/ } /*定義三角箭頭提示框的內(nèi)容框*/ .tooltip:after { content: ""; /*請勿省略*/ position: absolute; /*絕對定位*/ background-color: #aaa; /*設(shè)置內(nèi)容框的背景色*/ color: #fff; /*設(shè)置內(nèi)容框的文本顏色*/ padding: 5px; /*設(shè)置內(nèi)容框的內(nèi)邊距*/ border-radius: 5px; /*設(shè)置內(nèi)容框的圓角*/ font-size: 14px; /*設(shè)置內(nèi)容框文本的大小*/ bottom: 100%; /*將內(nèi)容框放在箭頭上方*/ left: 50%; /*將內(nèi)容框放在箭頭中央*/ margin-left: -60px; /*將內(nèi)容框向左移動寬度的一半*/ opacity: 0; /*設(shè)置內(nèi)容框的透明度為0*/ transition: opacity 0.3s; /*設(shè)置過渡效果為0.3秒*/ } /*鼠標懸停時顯示內(nèi)容框*/ .tooltip:hover:after { opacity: 1; /*透明度為1,顯示內(nèi)容框*/ }
以上代碼可以快速實現(xiàn)一個簡單的三角箭頭提示框。根據(jù)具體情況,可以通過調(diào)整樣式、增加交互等方式來完善這個提示框。
下一篇上一頁 下一頁 css