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

源代碼下載