成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

純css實(shí)現(xiàn)漂亮又健壯的tooltip

BingqiChen / 916人閱讀

摘要：前言的實(shí)現(xiàn)有多種方式，下面是一個(gè)成長(zhǎng)史。終極版其實(shí)改進(jìn)版一般用也夠了，但同事老爺們覺得不夠漂亮，逼格不高，沒有動(dòng)畫。無意間逛到百度云管理后臺(tái)頁(yè)面，發(fā)現(xiàn)了一排漂亮的，這不正是我需要的嗎竊喜于是研究一番，拿來即用。用實(shí)現(xiàn)居中和偏移效果。

前言

tooltip的實(shí)現(xiàn)有多種方式，下面是一個(gè)tooltip成長(zhǎng)史。

預(yù)覽

https://codepen.io/moddx/pen/...

原始版

最簡(jiǎn)單的莫過于就用原始title屬性，像這樣：

缺點(diǎn)是體驗(yàn)是差了點(diǎn)，并且鼠標(biāo)移上去，過一會(huì)兒才響應(yīng)。

改進(jìn)版

于是改進(jìn)了下面這個(gè)版本

html部分 
  

    鼠標(biāo)移動(dòng)到這
    提示文本
css部分 
.btn {
  width: 100px;
  position: relative;
  display: inline-block;
  background-color: gold;
  padding: 5px;
  cursor: pointer;
}

.btn .tip {
  display: none;
  width: 100px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  font-size: 12px;

  /* 垂直居中 */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 118px;
  z-index: 1;
}

.btn:hover .tip {
  display: block;
}

一開始設(shè)置tip是隱藏display: none;，當(dāng)鼠標(biāo)移上去，將tip樣式設(shè)置為display: block;來顯示。

終極版

其實(shí)改進(jìn)版一般用也夠了，但同事老爺們覺得不夠漂亮，逼格不高，沒有動(dòng)畫。
無意間逛到百度云管理后臺(tái)頁(yè)面，發(fā)現(xiàn)了一排漂亮的tooltip，這不正是我需要的嗎？竊喜！于是研究一番，拿來即用。

html部分：
css部分： 
    .btn {
      position: relative;

      display: block;
      margin: 100px auto;
      padding: 10px;
      font-size: 14px;
      background: #fff;
      color: green;
      border: 1px solid green;
      cursor: pointer;
    }
    [tip]:after {
      content: attr(tip);
      visibility: hidden;
      /* 實(shí)現(xiàn)垂直居中 */
      position: absolute;
      top: 50%;
      transform: translate(-5px, -50%);
      transition: all .3s;

      left: 100%;
      opacity: 0;

      /* 空白問題 */
      white-space: pre;
      font-size: 16px;
      padding: 5px 10px;
      background-color: rgba(18,26,44,0.8);
      color: #fff;
      box-shadow: 1px 1px 14px rgba(0,0,0,0.1)
    }
    [tip]:hover {
      /* ie兼容 */
      overflow: visible
    }
    .btn:hover:after {
      opacity: .8;
      transition: all .3s;
      transform: translate(5px, -50%);
      visibility: visible;
      display: block;
    }

首先，在標(biāo)簽中加上屬性tip，css樣式中用content: attr(tip);獲取屬性值。
默認(rèn)設(shè)置tip隱藏visibility: hidden;。
用transform: translate(-5px, -50%);實(shí)現(xiàn)居中和偏移效果。
動(dòng)畫時(shí)間設(shè)置為0.3s:transition: all .3s;。
注意：white-space: pre;是為了考慮到tip中有可能帶有空格，那么也需要將空格顯示出來。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/116868.html

相關(guān)文章

  • 如何使用CSS創(chuàng)建巧妙的動(dòng)畫提示框

    摘要：我們巧妙的提示框打算使用屬性選擇器也就是方括號(hào)表示法。相對(duì)性這是用在提示框的父元素上的。向上向下提示框要用到關(guān)鍵幀，而向左向右提示框使用關(guān)鍵幀。注意，在這些關(guān)鍵幀中，我們只定義了提示框所需的終止?fàn)顟B(tài)。 原文：https://webdesign.tutsplus.co...原作：Jase Smith翻譯：Stypstive 當(dāng)你的用戶需要漂亮的圖標(biāo)給出額外的文字信息時(shí)，亦或是當(dāng)他們?cè)邳c(diǎn)擊...

    wmui 評(píng)論0 收藏0

  • 如何使用CSS創(chuàng)建巧妙的動(dòng)畫提示框

    摘要：我們巧妙的提示框打算使用屬性選擇器也就是方括號(hào)表示法。相對(duì)性這是用在提示框的父元素上的。向上向下提示框要用到關(guān)鍵幀，而向左向右提示框使用關(guān)鍵幀。注意，在這些關(guān)鍵幀中，我們只定義了提示框所需的終止?fàn)顟B(tài)。 原文：https://webdesign.tutsplus.co...原作：Jase Smith翻譯：Stypstive 當(dāng)你的用戶需要漂亮的圖標(biāo)給出額外的文字信息時(shí)，亦或是當(dāng)他們?cè)邳c(diǎn)擊...

    vpants 評(píng)論0 收藏0

  • 67 個(gè)拯救前端開發(fā)者的工具、庫(kù)和資源

    摘要：庫(kù)一個(gè)用來在中創(chuàng)建炫酷的浮動(dòng)粒子的庫(kù)一個(gè)用來在中創(chuàng)建物體和空間的庫(kù)快速實(shí)現(xiàn)全屏滾動(dòng)特性打字機(jī)效果滾動(dòng)到某個(gè)元素位置時(shí)觸發(fā)一個(gè)功能語法高亮使用創(chuàng)建漂亮的圖表能夠明顯加速網(wǎng)站加載時(shí)間，鼠標(biāo)時(shí)預(yù)加載資源另一個(gè)圖表庫(kù)一個(gè)基于動(dòng)畫和平移的雪碧圖庫(kù)實(shí)現(xiàn) Javascript 庫(kù) Particles.js? 一個(gè)用來在 web 中創(chuàng)建炫酷的浮動(dòng)粒子的庫(kù) Three.js? 一個(gè)用來在 web 中創(chuàng)...

    XiNGRZ 評(píng)論0 收藏0

  • javascript功能插件大集合 前端常用插件 js常用插件

    摘要：轉(zhuǎn)載來源包管理器管理著庫(kù)，并提供讀取和打包它們的工具。能構(gòu)建更好應(yīng)用的客戶端包管理器。一個(gè)整合和的最佳思想，使開發(fā)者能快速方便地組織和編寫前端代碼的下一代包管理器。很棒的組件集合。隱秘地使用和用戶數(shù)據(jù)。 轉(zhuǎn)載來源：https://github.com/jobbole/aw... 包管理器管理著 javascript 庫(kù)，并提供讀取和打包它們的工具。?npm – npm 是 javasc...

    netmou 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<