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

当前位置 : 首页 > 网页制作 > CSS > CSS3实现Tooltip提示框飞入飞出动画

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

来源: 作者: 时间:2016-01-25 10:01
接下来我们来简单分析一下这个Tooltip实现的CSS3代码。首先是HTML代码,主要是构造了3个小图标菜单以及对应的Tooltip提示框内容:复制代码div id=containerdiv class=item h1D h1div class
接下来我们来简单分析一下这个Tooltip实现的3代码。
 
首先是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的实现。
Tag:
网友评论

<