css:tooltip

DOCTYPE html>
html>
head>
    title>tooltiptitle>
    link rel="stylesheet" href="css/font-awesome.min.css">
    style>
    body {
        background-color: green;
        padding: 200px;
        width: 100%;
        height: 100%;
        font-size: 1.5em;
        font-weight: 300;
        font-family: ‘Arial‘;
    }
    *,*.after,*.before {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        -o-box-sizing: border-box;
        box-sizing: border-box;
    }
    li {
        list-style: none;
        display: inline-block;
        padding: 20px;
    }
    li a {
        position: relative;
        display: inline-block;
        text-decoration: none;
        font-weight: 700;
        color: rgba(0,0,0,0.3);
        z-index: 999;
        -webkit-transition: color 0.3s;
        transition: color 0.3s;
        
    }
    .tooltip-content {
        position: absolute;
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background-color: #fff;
        z-index: 9999;
        bottom: 100%;
        left: 50%;
        margin-left: -40px;
        margin-bottom: 20px;
        text-align: center;
        padding-top: 20px;
        color: green;
        opacity: 0;
        -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
        transition: opacity 0.3s, transform 0.3;
    }

    .tooltip-content:after{
        position: absolute;
        display: block;
        content: ‘‘;
        width: 30px;
        height: 20px;
        background: url(‘img/tooltip1.svg‘) no-repeat;
        top: 100%;
        margin-top: -7px; 
        margin-left: -15px;
        left: 50%;
    }
    //hover之前的状态
    .tooltip-content i {
        -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
        transition: opacity 0.3s, transform 0.3s;
    }
    //hover之后的最终状态
    a:hover {
        color: rgba(255,255,255,1);
    }
    a:hover .tooltip-content i,
    a:hover .tooltip-content {
        opacity: 1;
        -webkit-transform: translate3D(0,0,0) rotate3D(1,1,1,0) scale3D(1,1,1);
    }
    .tooltip-effect1 .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: center bottom;
        transform-origin: 50% 100%;
    }

    .tooltip-effect1 .tooltip-content i {
        opacity: 0;
        -webkit-transform: scale3D(0,0,5);
        transform: scale3D(0,0,1);
    }

    .tooltip-effect2 .tooltip-content {
        -webkit-transform: translate3D(0, 10px,0);
        transform: translate3D(0, 10px,0)
    }

    .tooltip-effect2 .tooltip-content i{
        -webkit-transform: translate3D(0, 15px,0);
        transform: translate3D(0, 15px,0);
    }

    .tooltip-effect3 .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-effect3 .tooltip-content i{
        -webkit-transform: scale3D(0,0,1);
        transform: scale3D(0,0,1);
    }

    .tooltip-effect4 .tooltip-content {
        -webkit-transform: translate3D(0, -20px,0);
        transform: translate3D(0, -20px,0);
    }

    .tooltip-effect4 .tooltip-content i{
        -webkit-transform: translate3D(0, 20px,0);
        transform: translate3D(0, 20px,0);
    }

    .tooltip-effect5 .tooltip-content {
        -webkit-transform: scale3D(0,0,1);
        transform: scale3D(0,0,1);
    }
    .tooltip-effect5 .tooltip-content i{
        -webkit-transform: translate3D(0, 20px,0);
        transform: translate3D(0, 20px,0);
    }
    
    style>
head>
body>
    ul>
        li>
            a href="#" class="tooltip-effect1">Homespan class="tooltip-content">i class="fa fa-fw fa-home">i>span>a>
        li>
        li>
            a  href="#" class="tooltip-effect2">About mespan class="tooltip-content">i class="fa fa-fw fa-user">i>span>a>
        li>
        li>
            a  href="#" class="tooltip-effect3">Photographspan class="tooltip-content">i class="fa fa-fw fa-camera-retro">i>span>a>
        li>
        li>
            a  href="#" class="tooltip-effect4">Morespan class="tooltip-content">i class="fa fa-fw fa-briefcase">i>span>a>
        li>
        li>
            a href="#" class="tooltip-effect5">Servicespan class="tooltip-content">i class="fa fa-fw fa-envelope">i>span>a>
        li>
    ul>
body>
html>