男人的17种幻想在线观看,高清中文字幕三浦惠理子,ww免费精品久久

技術(shù)頻道 - html技術(shù)

純CSS實(shí)現(xiàn)的tool-tip（幫助提示）動(dòng)畫顯示效果

作者:admin 時(shí)間:2024-4-17 9:50:23 瀏覽:

工具提示(tool-tip)也稱為信息提示，在圖形用戶界面(GUI) 中比較常見。當(dāng)將鼠標(biāo)懸停在某元素上時(shí)，文本框會(huì)彈出，并顯示有關(guān)該元素的信息。tool-tip的實(shí)現(xiàn)方法有很多，比如可以用成熟的套件如Bootstrap來完成，也可以自編JS程序來實(shí)現(xiàn)，不過本文要介紹的是，用純CSS來實(shí)現(xiàn)，方法很簡(jiǎn)單，代碼量不多，而效果卻很不錯(cuò)。

demo download

實(shí)例介紹

當(dāng)鼠標(biāo)移到幫助按鈕上時(shí)，彈出文本提示框，效果是從小變大的動(dòng)畫顯示。

實(shí)現(xiàn)方法是純CSS。

HTML代碼

<div class="input-container">
   <div class="help-tip" role="tooltip" id="name-tooltip">
      <div class="help-tip__content">
        <h3 class="help-tip__title">幫助提示標(biāo)題</h3>
        <p class="help-tip__text">幫助提示文本文字在這里。</p>
      </div>
   </div>
</div>

解釋：

最外層的div，class="input-container"，是元素位置定義，與tool-tip效果無關(guān)。

第二個(gè)div，id="name-tooltip"，這個(gè)div里顯示一個(gè)幫助圖標(biāo)。

第三個(gè)div，class="help-tip__content"，這個(gè)div是提示文本框。

CSS代碼

/*-------------
Help-tip Style
---------------*/
.help-tip {
  position: absolute;
  top: -.2em; right: 1.1em;
  //border: 1px solid red;
}

.help-tip::before { /*問號(hào)*/
  content: "?";
  position: absolute;
  top: 0; right: 0;
  font-size: 1.2em;
  padding: .1em .6em;
  border-radius: 50%;
  font-weight: bold;
  cursor: help; 
  background: #1565c0;
  color: #f9f9f9;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}

.help-tip__content {
  position: absolute;
  top: 2.75em; right: -.2em;
  min-width: 15em;
  padding: .5em 1em;
  background: rgba(31, 35, 39, 0.9);
  color: #f9f9f9;
  border-radius: .2em;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
  z-index: 2;
  transform-origin: 95% -1%;
  transform: scale(0);
  transition: transform .2s ease;
}

.help-tip__content::before { /*help-tip的箭頭指向*/
  content: "";
  position: absolute;
  top: -1.35em; right: .6em; 
  border: .7em solid transparent;
  border-bottom-color: rgba(31, 35, 39, 0.9);
}

.help-tip__content::after { /*防止鼠標(biāo)從問題標(biāo)志向下移動(dòng)到內(nèi)容時(shí)隱藏幫助提示*/
  content: "";
  position: absolute;
  width: 60%;
  min-height: 2em;
  top: -2em; right: 0;
  //background: red;
}

.help-tip:hover .help-tip__content,
.help-tip:focus .help-tip__content{
  transform: scale(1);
}


@supports(filter: drop-shadow(0 0 0 #ccc)) { /*支持 filter: drop-shadow 的瀏覽器, 增加它并刪除 box-shadow*/
  
  .help-tip__content {
    box-shadow: none;
    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, .5));
  }
  
}

@supports(display: flex) { /*支持 display: flex 的瀏覽器*/
  
  .help-tip__content {
    display: flex;
    flex-flow: column;
    flex-wrap: wrap;
  }
  
}