个人源码~~
来源：1-6 汽泡特效动画制作（3）
翌子涵
2015-03-08 17:53
HTML部分
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS3实现鼠标悬停显示消息提示框</title> <meta http-equiv="X-UA-compatible" contnet="IE=edge"> <meta name="viewport" content="width=device-width" initial-scale="1"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/font-awesome.min.css"> </head> <body> <div> <ul> <li> <a href="#" class="tooltip tooltip-effect-1">Home <!-- 应用SVG做背景图片 --> <span> <!-- 应用文字图片,fa:Icon公共类; fa-camera:相机Icon; fa-fw:使i标签display:block; fa-spin:Icon动画效果; fa-border:Icon具有圆角边框; --> <i class="fa fa-camera fa-fw"></i> </span> </a> </li> <li> <a href="#" class="tooltip tooltip-effect-2">About me <span><i class="fa fa-heartbeat fa-fw"></i></span> </a> </li> <li> <a href="#" class="tooltip tooltip-effect-3">Photography <span><i class="fa fa-diamond fa-fw"></i></span> </a> </li> <li> <a href="#" class="tooltip tooltip-effect-4">Work <span><i class="fa fa-cogs fa-fw"></i></span> </a> </li> <li> <a href="#" class="tooltip tooltip-effect-5">Contact <span><i class="fa fa-comments fa-fw"></i></span> </a> </li> </ul> </div> </body> </html>
CSS部分
html {
width:100%;
height:100%;
/*屏幕旋转时文字大小不发生改变;*/
-webkit-text-size-adjust:none;
}
body {
margin: 0;
padding: 0;
width:100%;
height:100%;
background: #47c9af;
color:#74777b;
font-weight: 300;
font-size: 1.5em;
font-family:"Raleway","Arial";
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
a:link,a:visited,a:focus {
text-decoration: none;
outline: none;
}
*,*:after,*:before {
/*padding(填充)和border(边框)都不要影响盒子原先设定的大小;*/
-webkit-box-sizing:border-box;
}
*:after,*:before {
display: block;
content:"";
}
/*清除浮动*/
*:after {
clear:both;
}
/*Navgaitor*/
.nav {
width:800px;
height:300px;
margin:200px auto;
}
.nav li {
display: inline-block;
margin:0 1em;
}
.tooltip {
display: inline-block;
font-weight: 700;
color:rgba(0,0,0,0.3);
padding:0.15em 0.25em 0 0;
position: relative;
z-index: 999;
transition: 0.4s;
}
.tooltip:hover {
color:rgba(255,255,255,1);
}
.tooltip-content {
position: absolute;
z-index: 9999;
width:80px;
height:80px;
/*span相对于父元素a垂直居中:
left:50%;span的左侧距离a的左侧是a宽度一半的距离;
margin-left:-40px;左移相对于自身宽度的一半;
bottom:100%;span的底部距离a的底部是a高度一倍的距离,刚好在a的正上方;
*/
left:50%;
margin-left: -40px;
bottom:100%;
margin-bottom: 20px;
text-align: center;
padding-top: 22px;
/*应用svg文件做背景图片;*/
background:url(../img/tooltip1.svg) no-repeat center center;
opacity: 0;
transition: 0.4s;
}
.tooltip-content i {
font-style: normal;
font-size: 30px;
color:#47c9af;
opacity: 0;
transition: 0.3s;
}
.tooltip-effect-1 .tooltip-content {
/*
translate3d(0,10px,0):元素沿Y轴向下移动10px;
rotate3d(1,1,1,45deg):元素分别在X轴,Y轴和Z轴旋转45°;
transform-origin:50% 100%;元素以本身计算出的位置为中心点;
*/
transform: translate3d(0,10px,0) rotate3d(1,1,1,45deg);
transform-origin :50% 100%;
}
.tooltip-effect-1 .tooltip-content i {
/*
元素在X轴和Y轴上缩放0倍(最小化),在Z轴缩放1倍(不缩放);
*/
transform:scale3d(0,0,1);
}
.tooltip-effect-2 .tooltip-content {
transform: translate3d(0,20px,0);
}
.tooltip-effect-2 .tooltip-content i {
transform:translate3d(0,15px,0);
}
.tooltip-effect-3 .tooltip-content {
transform:translate3d(0,10px,0) rotate3d(0,1,0,90deg);
transform-origin:50% 100%;
}
.tooltip-effect-3 .tooltip-content i {
transform:scale3d(0,0,1);
}
.tooltip-effect-4 .tooltip-content {
transform:translate3d(0,-20px,0);
}
.tooltip-effect-4 .tooltip-content i {
transform:translate3d(0,20px,0);
}
.tooltip-effect-5 .tooltip-content {
transform:scale3d(0,0,1);
transform-origin:50% 100%;
}
.tooltip-effect-5 .tooltip-content i {
transform:translate3d(0,20px,0);
}
/*划过效果,所有效果归位0;*/
.tooltip:hover .tooltip-content,
.tooltip:hover .tooltip-content i {
opacity:1;
transform:translate3d(0,0,0) rotate3d(1,1,1,0) scale3d(1,1,1);
}Font Awesome Icons 下载链接
写回答
关注
2回答
-
- newdays
- 2015-03-09 11:54:42
应该把代码拿出来晒晒
-
- purple_yao
- 2015-03-09 10:06:04
顶，好强，你自己做了一遍？
CSS3实现漂亮ToolTips效果
CSS3 实现鼠标悬停弹出信息提示框，学习达到对CSS3深入了解的目的
42715 学习 · 106 问题
相似问题