CSS3实现Tooltip提示框飞入飞出动画

时间：2022-05-14 05:20:24

原文:CSS3实现Tooltip提示框飞入飞出动画

我们见过很多利用背景图片制作的Tooltip提示框，但是缺点是扩展比较麻烦，要经常改动图片。还有就是利用多层CSS的叠加实现，但是效果比较生硬，外观不怎么好看。今天我来分享一下利用CSS3快速实现既美观又实用的Tooltip提示框，提示框伴有飞入飞出的动画效果。先来看看效果图。

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:;

    height:;

    border-left: 10px solid transparent;

    border-right: 10px solid transparent;

    border-top: 10px solid #fff;

}

这里我们对Tooltip区域进行了圆角和阴影的效果渲染，让其在鼠标滑过是飞入，鼠标移出是飞出，看得出来，实现这样的效果主要还是利用了

-webkit-transition和-moz-transition

最后是一个向下的小箭头，用类.arrow来标识，上面的代码也实现了这个CSS的实现。

最后，提供一个源代码包给大家，下载地址>>

相关文章