0x01布局总体预览图

慕课Amy-Tooltip 修改版总体布局预览图

0x02 代码示例

html布局代码

<body>

        <div class="nav">
            <ul>
                <li><a href="#" class="tooltip tooltip-effect-1">Home
                    <span class="tooltip-content">
                        <i class="fa fa-home fa-fw" aria-hidden="true"></i></span>
                </a></li>
                <li><a href="#" class="tooltip tooltip-effect-2">About me
                    <span class="tooltip-content">
                        <i class="fa fa-book fa-fw" aria-hidden="true"></i></span>
                </a></li>
                <li><a href="#" class="tooltip tooltip-effect-3">
                    <span class="tooltip-content">
                        <i class="fa fa-camera-retro"></i></span>Potography
                </a></li>
                <li><a href="#" class="tooltip tooltip-effect-4">Work
                    <span class="tooltip-content">
                        <i class="fa fa-book fa-fw" aria-hidden="true"></i></span>
                </a></li>
                <li><a href="#" class="tooltip tooltip-effect-5">Contact
                    <span class="tooltip-content">
                        <i class="fa fa-book fa-fw" aria-hidden="true"></i></span>
                </a></li>
            </ul>
        </div>
    </body>

css样式代码

    /*Global style*/
    html{
        width: 100%;
        height: 100%;
        -webkit-text-size-adjust:none;
        -moz-text-size-adjust:none;
        -o-text-size-adjust:none;
        -ms-text-size-adjust:none;
        text-size-adjust:none;

    } 
    
    body{
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        background: #47c9af;
        color: #74777b;
        font-weight:300;
        font-size: 1.5em;
    
    }
     ul{
        list-style: none;
        padding: 0;
        margin: 0;  
     }
     a:link,a:visited,a:focus{
        text-decoration: none;
        outline:none;
     }
    /*
     box-sizing 属性用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型。可以使用此属性来模拟不正确支持CSS盒子模型规范的浏览器的行为。
     content-box
    默认值，标准盒子模型。 width 与 height 只包括内容的宽和高， 不包括边框（border），内边距（padding），外边距（margin）。注意: 内边距, 边框 & 外边距 都在这个
    盒子的外部。 比如. 如果 .box {width: 350px}; 而且 {border: 10px solid black;} 那么在浏览器中的渲染的实际宽度将是370px;

    尺寸计算公式：width = 内容的宽度，height = 内容的高度。宽度和高度都不包含内容的边框（border）和内边距（padding）。
    border-box
    width 和 height 属性包括内容，内边距和边框，但不包括外边距。这是当文档处于 Quirks模式 时Internet Explorer使用的盒模型。注意，填充和边框将在盒子内 , 
    例如, .box {width: 350px; border: 10px solid black;} 导致在浏览器中呈现的宽度为350px的盒子。内容框不能为负，并且被分配到0，使得不可能使用border-box
    使元素消失;
    这里的维度计算为：
    width = border + padding + 内容的  width，
    height = border + padding + 内容的 height。
    padding-box   
    width 和 height 属性包括内容和内边距，但是不包括边框和外边距。只有Firefox实现了这个值，它在Firefox 50中被删除。
     */
     *,*: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;
     }
    *:after,*:before{
        display:inlie-block;
        content:"";
    }
    *:after{clear: both;}
    
    /*Navgaitor style*/
    .nav{
        width: 900px;
        height: 300px;
        margin: 300px auto;
    }
    .nav li{
        display: inline-block;
        margin:0 1em;
        }
    .tooltip{
        position: relative;   /*定位属性 使元素 按照用户定义进行移动  相对定位元素*/
        z-index: 9;
        float: left;
        font-weight: 700;
        color: rgba(0,0,0,0.3);
        padding: 0.15em 0.25em;     
    }
    .tooltip-content {
        position: absolute;   /*定位属性 使元素 按照用户定义进行移动  绝对定位元素*/
        z-index: 10;
        left: 50%;
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background: #fff;
        margin-left:-40px;
        bottom: 100%;
        text-align: center;
        padding-top:25px;
        color:#47c9af;
    }
    .tooltip-content::after{  /*css3 after元素选择*/
        display: block;
        content: "";
    }
    .tooltip>*{
        opacity: 0;/*css透明度*/
    }
    .tooltip:hover > *{
        opacity: 1; /*css透明度*/
        transition:1s; /*css3过渡动画*/
        transform: rotate(360deg); /*css3旋转动画*/
    }

效果图