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

yykj 发布于 2014/04/14 17:23
阅读 2K+
收藏 7

Linux基金会免费官方培训及考试申请即将截止,戳这里申请!>>>

我们见过很多利用背景图片制作的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的实现。

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

加载中
返回顶部
顶部