首页 > 代码库 > css:tooltip

css:tooltip

2024-11-23 22:22:39   202人阅读

<!DOCTYPE html>
<html>
<head>
    <title>tooltip</title>
    <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">Home<span class="tooltip-content"><i class="fa fa-fw fa-home"></i></span></a>
        </li>
        <li>
            <a  href="#" class="tooltip-effect2">About me<span class="tooltip-content"><i class="fa fa-fw fa-user"></i></span></a>
        </li>
        <li>
            <a  href="#" class="tooltip-effect3">Photograph<span class="tooltip-content"><i class="fa fa-fw fa-camera-retro"></i></span></a>
        </li>
        <li>
            <a  href="#" class="tooltip-effect4">More<span class="tooltip-content"><i class="fa fa-fw fa-briefcase"></i></span></a>
        </li>
        <li>
            <a href="#" class="tooltip-effect5">Service<span class="tooltip-content"><i class="fa fa-fw fa-envelope"></i></span></a>
        </li>
    </ul>
</body>
</html>

 

css:tooltip


联系
我们