来源：自学PHP网 时间：2015-04-14 14:51 作者： 阅读:次
[导读] 接下来我们来简单分析一下这个Tooltip实现的CSS3代码。首先是HTML代码，主要是构造了3个小图标菜单以及对应的Tooltip提示框内容：复制代码div id=containerdiv class=item h1D h1div class...
|
接下来我们来简单分析一下这个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的实现。
|
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习，以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明：本站所有视频，教程都由网友上传，站长收集和分享给大家学习使用，如由牵扯版权问题请联系站长邮箱904561283@qq.com
