CSS 3 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を使用したほうがいいです.
1つの要素のcssの複数のプロパティを定義する場合は、次の順序に従います.
1.位置position
2.サイズwidth
3.文字text-align
4.バックグラウンドbackground
5.その他animation