CSS3实现漂亮ToolTips

演示Demo

 

5种效果的主要css以下：

/* transform:向元素应用2D或3D转换; transform-origin属性只有在定义了transform之后才生效 */
.tooltip-effect-1 .tooltip-content{
    -webkit-transform:translate3d(0,10px,0) rotate3d(1,1,1,45deg);
    transform:translate3d(0,10px,0) rotate3d(1,1,1,45deg);
    -webkit-transform-origin:50% 100%;
    transform-origin:50% 100%; /* 等价于transform-origin:center bottom; */
}

.tooltip-effect-1 .tooltip-content i{
    -webkit-transform:scale3d(0,0,1);
    transform:scale3d(0,0,1);
}

.tooltip-effect-2 .tooltip-content{
    -webkit-transform:translate3d(0,20px,0);
    transform:translate3d(0,20px,0);
}

.tooltip-effect-2 .tooltip-content i{
    -webkit-transform:translate3d(0,15px,0);
    transform:translate3d(0,15px,0);
}

.tooltip-effect-3 .tooltip-content{
    -webkit-transform:translate3d(0,10px,0) rotate3d(0,1,0,90deg);
    transform:translate3d(0,10px,0) rotate3d(0,1,0,90deg);
    -webkit-transform-origin:50% 100%;
    transform-origin:50% 100%;
}

.tooltip-effect-3 .tooltip-content i{
    -webkit-transform:scale3d(0,0,1);
    transform:scale3d(0,0,1);
}

.tooltip-effect-4 .tooltip-content{
    -webkit-transform:translate3d(0,-20px,0);
    transform:translate3d(0,-20px,0);
}

.tooltip-effect-4 .tooltip-content i{
    -webkit-transform:translate3d(0,20px,0);
    transform:translate3d(0,20px,0);
}

.tooltip-effect-5 .tooltip-content{
    -webkit-transform:scale3d(0,0,1);
    transform:scale3d(0,0,1);
    -webkit-transform-origin:50% 100%;
    transform-origin:50% 100%;     
}

.tooltip-effect-5 .tooltip-content i{
    -webkit-transform:translate3d(0,20px,0);
    transform:translate3d(0,20px,0);
}

View Code

 

效果里面的小图标引用到了一个第三方库：fontawesome

源代码下载