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/

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

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

  • 相关阅读:
    Angular2 初识
    TypeScript 函数 (五)
    TypeScript 接口(三)
    TypeScript 基本类型(一)
    TypeScript 变量声明(二)
    Web API中的模型验证Model Validation
    DataContract 和 DataMember
    (推荐JsonConvert )序列化和反序列化Json
    9、DFA最小化,语法分析初步
    8.非确定的自动机NFA确定化为DFA
  • 原文地址:https://www.cnblogs.com/Lanjerry/p/4388083.html
Copyright © 2011-2022 走看看