CSS3實現Tooltip提示框飛入飛出動畫

我們見過很多利用背景圖片制作的Tooltip提示框，但是缺點是擴展比較麻煩，要經常改動圖片。還有就是利用多層CSS的疊加實現，但是效果比較生硬，外觀不怎么好看。今天我來分享一下利用CSS3快速實現既美觀又實用的Tooltip提示框，提示框伴有飛入飛出的動畫效果。先來看看效果圖。

看上去還簡單吧，其實實現的思路的確很簡單。

具體效果我們可以在這里查看在線演示。

接下來我們來簡單分析一下這個Tooltip實現的CSS3代碼。

首先是HTML代碼，主要是構造了3個小圖標菜單以及對應的Tooltip提示框內容：

<div id="container">
<div class="item">

      <h1>D</h1>
<div class="tooltip">
  <p>Find important documents and manuals.</p>
  <div class="arrow"></div>
  </div>
  </div>
</div>

  <div class="item">
      <h1>A</h1>

    <div class="tooltip">
  <p>Take a look at our crew and become a friend.</p>
  <div class="arrow"></div>
  </div>
  </div>
</div>

  <div class="item">
      <h1>C</h1>
    <div class="tooltip">
  <p>Explore our process and see how we can help.</p>
  <div class="arrow"></div>
  </div>
  </div>

接下來是CSS代碼，首先我們定義了一個圖標集，讓每個小按鈕都能顯示各自的圖標：

@font-face {
    font-family:'HeydingsCommonIconsRegular';
    src: url('http://ianfarb.com/random/heydings_icons-webfont.eot');
    src: url('http://ianfarb.com/random/heydings_icons-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://ianfarb.com/random/heydings_icons-webfont.woff') format('woff'),
         url('http://ianfarb.com/random/heydings_icons-webfont.ttf') format('truetype'),
         url('http://ianfarb.com/random/heydings_icons-webfont.svg#HeydingsCommonIconsRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

h1    {font-family:'HeydingsCommonIconsRegular', sans-serif;
       font-weight:normal;
       margin:30px 0 0 0;
       color:#fff;
  text-align:center;
       font-size:60px;
       line-height:30px;}

然后重點是實現Tooltip提示框：

.tooltip { width:120px;
           padding:10px;
           border-radius:3px;
           position:absolute;
           box-shadow:1px 1px 10px 0 #ccc;
           margin: -500px 0 0 -20px;
           background:#fff;
           -webkit-transition:margin .5s ease-in-out;
          -moz-transition:margin .5s ease-in-out;}

.item:hover  {  background:#6d643b;}

.item:hover .tooltip {
           margin:-145px 0 0 -20px;
           -webkit-transition: margin .15s ease-in-out;
  -moz-transition: margin .15s ease-in-out;}

.arrow {
  position:absolute;
  margin:10px 0 0 50px;
    width: 0; 
    height: 0; 
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #fff;
}

這里我們對Tooltip區域進行了圓角和陰影的效果渲染，讓其在鼠標滑過是飛入，鼠標移出是飛出，看得出來，實現這樣的效果主要還是利用了

-webkit-transition和-moz-transition

最后是一個向下的小箭頭，用類.arrow來標識，上面的代碼也實現了這個CSS的實現。

最后，提供一個源代碼包給大家，下載地址>>