|
[tr][td] 我们见过很多利用背景图片制作的Tooltip提示框，但是缺点是扩展比较麻烦，要经常改动图片。还有就是利用多层CSS的叠加实现，但是效果比较生硬，外观不怎么好看。今天我来分享一下利用CSS3快速实现既美观又实用的Tooltip提示框，提示框伴有飞入飞出的动画效果。先来看看效果图。
图片：141206346355522.jpg  看上去还简单吧，其实实现的思路的确很简单。 具体效果我们可以在这里查看在线演示。 接下来我们来简单分析一下这个Tooltip实现的CSS3代码。 首先是HTML代码，主要是构造了3个小图标菜单以及对应的Tooltip提示框内容： [*] [*]D Find important documents and manuals. [*]A [*]Take a look at our crew and become a friend. [*]C Explore our process and see how we can help. 复制代码 接下来是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的实现。 最后，提供一个源代码包给大家。下载地址>> 本文由HTML5中国为您提供 关键词：CSS3、CSS学习网站、html5、HTML5 [/td][/tr] |
|
|
沙发#
发布于：2015-07-18 12:07
学习了！！！
|
|
|
