zoukankan      html  css  js  c++  java
  • 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

    源代码下载

    作者:LanJerry

    出处:http://www.cnblogs.com/Lanjerry/

    您的支持是对博主最大的鼓励,感谢您的认真阅读。

    本文版权归作者所有,欢迎转载,但请保留该声明。

  • 相关阅读:
    css圆,背景,img填满等样式
    MySQL双日志
    MySQL分层和查询数据的流程
    ZJNU 2345
    ZJNU 2342
    ZJNU 2340/2341/2343
    ZJNU 2235
    ZJNU 2226
    ZJNU 2212
    ZJNU 2208
  • 原文地址:https://www.cnblogs.com/Lanjerry/p/4388083.html
Copyright © 2011-2022 走看看