CSS3教程

当前位置: HTML5技术网 > CSS3教程 > CSS3实现Tooltip提示框飞入飞出动画

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

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





看上去还简单吧,其实实现的思路的确很简单。

具体效果我们可以在这里查看在线演示。

接下来我们来简单分析一下这个Tooltip实现的CSS3代码。

首先是HTML代码,主要是构造了3个小图标菜单以及对应的Tooltip提示框内容:


  1. <div id="container"><div class="item">
  2. <h1>D</h1><div class="tooltip"><p>Find important documents and manuals.</p><div class="arrow"></div></div></div></div>
  3. <div class="item"><h1>A</h1>
  4. <div class="tooltip"><p>Take a look at our crew and become a friend.</p><div class="arrow"></div></div></div></div>
  5. <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代码,首先我们定义了一个图标集,让每个小按钮都能显示各自的图标:


  1. @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;
  2. }
复制代码
  1. 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提示框:


  1. .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;}
  2. .item:hover  {  background:#6d643b;}
  3. .item:hover .tooltip {margin:-145px 0 0 -20px;-webkit-transition: margin .15s ease-in-out;-moz-transition: margin .15s ease-in-out;}
  4. .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的实现。


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


本文由HTML5中国为您提供
关键词:CSS3、CSS学习网站、html5、HTML5




【CSS3实现Tooltip提示框飞入飞出动画】相关文章

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

2. 纯CSS实现Tooltip

3. Cufon, jQuery和CSS3实现的超强飞出菜单

4. Cufon, jQuery和CSS3实现的超强飞出菜单

5. jQuery/CSS3带Tooltip的滑杆动画

6. 分享一个纯CSS开发的气泡式提示框

7. Prompt轻量级提示框弹出层Jquery插件

8. Prompt轻量级提示框弹出层Jquery插件

9. jQuery消息提示框插件Tipso

10. jQuery带Tooltip表单验证的注册表单

本文来源:https://www.51html5.com/a1006.html

点击展开全部

﹝CSS3实现Tooltip提示框飞入飞出动画﹞相关内容

「CSS3实现Tooltip提示框飞入飞出动画」相关专题

其它栏目

也许您还喜欢