这几天做项目,经常用到bootstrap中的tooltip,他一插件的形式在项目中出现,样式改起来比较麻烦,索性自己做了个玩玩。
Demo来源与网上的教程,自己琢磨改进
Html如下
<!DOCTYPE html>
<html>
<head>
<title>tooltip</title>
<!-- 让IE采用最新的渲染模式 -->
<meta http-equiv="X-UA-compatible" content="IE=edge">
<!-- 移动端的页面宽度等于设备宽度,缩放比为1 -->
<meta name="viewport" content="width=device-width" initial-scale="1">
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="nav">
<ul>
<li>
<a href="#"class="tooltip tooltip-effect-1" >Home
<span class="tooltip-content"><i class="fa fa-home fa-fw"></i></span>
</a>
</li>
<li>
<a href="#"class="tooltip tooltip-effect-2" >About me
<span class="tooltip-content"><i class="fa fa-user fa-fw"></i></span>
</a>
</li>
<li>
<a href="#"class="tooltip tooltip-effect-3" >Photography
<span class="tooltip-content"><i class="fa fa-camera-retro fa-fw"></i></span>
</a>
</li>
<li>
<a href="#"class="tooltip tooltip-effect-4" >Work
<span class="tooltip-content"><i class="fa fa-briefcase fa-fw"></i></span>
</a>
</li>
<li>
<a href="#"class="tooltip tooltip-effect-5" >Contact
<span class="tooltip-content"><i class="fa fa-envelope fa-fw"></i></span>
</a>
</li>
</ul>
</div>
</body>
</html>
Css代码如下
html {
width: 100%;
height: 100%;
-webkit-text-size-adjust:none;
-moz-text-size-adjust:none;
-ms-text-size-adjust:none;
-o-text-size-adjust:none;
text-size-adjust:none;
}
body {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
background:#47c9af;
color: #74777b;
font-weight: 300;
font-size: 1.5em;
font-family: "Raleway","Arail";
}
ul {
list-style: none;
padding: 0px;
margin: 0px;
}
a:link,a:visited,a:focus{
text-decoration: none;
outline: none;
}
*,*:after,*:before {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;
}
*:after,*:before {
display: block;
content: "";
}
*:after {
clear: both;
}
.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;
position: relative;
}
.tooltip-content {
position: absolute;
left: 50%;
bottom:100%;
margin-left: -40px;
margin-bottom: 20px;
width: 80px;
height: 80px;
border-radius: 50%;
text-align: center;
color: #47c9af;
padding-top: 28px;
background: #ffffff;
opacity: 0;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.tooltip-content::after {
display: block;
content: "";
width: 30px;
height: 20px;
position: absolute;
left: 50%;
top:100%;
margin-left: -15px;
margin-top: -7px;
background: url(../img/tooltip1.svg) no-repeat bottom center;
background-size: 100%;
}
.tooltip .tooltip-content i{
opacity: 0;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.tooltip-effect-1 .tooltip-content {
-webkit-transform:translate3d(0,20px,0) rotate3d(1,1,1,45deg);
-moz-transform:translate3d(0,20px,0) rotate3d(1,1,1,45deg);
-ms-transform:translate3d(0,20px,0) rotate3d(1,1,1,45deg);
-o-transform:translate3d(0,20px,0) rotate3d(1,1,1,45deg);
-webkit-transform-origin:bottom center;
}
.tooltip-effect-2 .tooltip-content {
-webkit-transform:translate3d(0,20px,0);
-moz-transform:translate3d(0,20px,0);
-ms-transform:translate3d(0,20px,0);
-o-transform:translate3d(0,20px,0);
}
.tooltip-effect-2 .tooltip-content i {
-webkit-transform:translate3d(0,20px,0);
-moz-transform:translate3d(0,20px,0);
-ms-transform:translate3d(0,20px,0);
-o-transform:translate3d(0,20px,0);
}
.tooltip-effect-3 .tooltip-content {
-webkit-transform:translate3d(0,20px,0) rotate3d(0,1,0,90deg);
-moz-transform:translate3d(0,20px,0) rotate3d(0,1,0,90deg);
-ms-transform:translate3d(0,20px,0) rotate3d(0,1,0,90deg);
-o-transform:translate3d(0,20px,0) rotate3d(0,1,0,90deg);
}
.tooltip-effect-3 .tooltip-content i {
-webkit-transform:rotate3d(0,1,0,90deg);
-moz-transform:rotate3d(0,1,0,90deg);
-ms-transform:rotate3d(0,1,0,90deg);
-o-transform:rotate3d(0,1,0,90deg);
}
.tooltip-effect-4 .tooltip-content {
-webkit-transform:translate3d(0,-20px,0);
-moz-transform:translate3d(0,-20px,0);
-ms-transform:translate3d(0,-20px,0);
-o-transform:translate3d(0,-20px,0);
}
.tooltip-effect-4 .tooltip-content i {
-webkit-transform:translate3d(0,20px,0);
-moz-transform:translate3d(0,20px,0);
-ms-transform:translate3d(0,20px,0);
-o-transform:translate3d(0,20px,0);
}
.tooltip-effect-5 .tooltip-content i {
-webkit-transform:translate3d(0,20px,0);
-moz-transform:translate3d(0,20px,0);
-ms-transform:translate3d(0,20px,0);
-o-transform:translate3d(0,20px,0);
}
.tooltip:hover .tooltip-content,
.tooltip:hover .tooltip-content i {
opacity: 1;
transform: translate3d(0,0,0) rotate3d(1,1,1,0);
}
.tooltip:hover {
color: rgba(255,255,255,1);
-webkit-transition:color 0.3s;
transition:color 0.3s;
}
里面主要要注意的是:
a是触发效果的入口,span和i都是效果显示,实际项目中,可以更改span中的内容来变成不同的tooltip。
经常会在实现各种常规图形附带尖角效果的时候用到:after伪元素。
这次的css效果大致思路就是,先写好各个span和i所处的奇葩位置,再定义鼠标画上去的时候正常显示的位置,再给变化的元素加上transition,就OK了。
注意transform-origin这个属性,以及可能会有那些值。
当涉及渐变的时候,不显示的元素别用display:none,用opacity比较好。
在定义一个元素的css多个属性时,要有一定顺序:
1. 位置position
2. 大小width
3. 文字text-align
4. 背景background
5. 其他animation