CSS3实现Bootstrap的tooltip动画提示效果

这几天做项目，经常用到bootstrap中的tooltip，他一插件的形式在项目中出现，样式改起来比较麻烦，索性自己做了个玩玩。

Demo来源与网上的教程，自己琢磨改进

Html如下

    
    
    
    
    
    
    



    

        

            Home
            
            
        
        

            About me
            
            
        
        

            Photography
            
            
        
        

            Work
            
            
        
        

            Contact
            
            
        
    

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