CSS3实现漂亮ToolTips

浏览数：55 / 时间：2015年06月09日

演示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);
}